색상 선택기

색상 선택기는 브라우저에서 색상을 고르고 필요한 형식의 값을 확인할 수 있는 무료 도구입니다.

색상 선택기에서는 어떤 값을 확인할 수 있나요?

색상 선택기는 색상환에서 선택한 색상을 숫자로 표현해 줍니다. 화면에 보이는 같은 색상도 여러 형식으로 나타낼 수 있으며, 가장 널리 쓰이는 형식은 16진수, RGB, RGBA, HSL, HSLA입니다.

각 형식은 색상을 서로 다른 방식으로 설명합니다. 16진수와 RGB는 빨강, 초록, 파랑 채널 값을 지정합니다. HSL은 색상, 채도, 명도를 사용하므로 일정한 기준에 따라 색을 조정하기가 더 쉽습니다. 알파 채널이 포함된 형식은 불투명도도 나타냅니다.

• 16진수 값은 해시 기호 뒤에 16진수 숫자를 붙이며, 예시는 #336699입니다.
• RGB 값은 일반적으로 각 채널을 0에서 255 사이의 숫자로 나타내며, 예시는 rgb(51, 102, 153)입니다.
• HSL 값은 색상각과 채도 및 명도의 백분율로 색상을 나타내며, 예시는 hsl(210, 50%, 40%)입니다.
• RGBA와 HSLA에는 투명도가 추가됩니다. 알파 값이 0이면 완전히 투명하고 1이면 완전히 불투명합니다.

CSS는 색상 이름도 지원하지만, 사용할 수 있는 이름이 정해져 있어 정확한 디자인 토큰을 지정하기에는 적합하지 않습니다. 숫자로 생성된 값은 대체로 디자인 시스템, 스타일시트, 애플리케이션 코드 사이에서 옮겨 쓰기가 더 쉽습니다.

색상 선택기는 어떻게 사용하나요?

Color 필드를 선택하고 색상환에서 원하는 지점을 고른 다음, 애플리케이션에 필요한 형식의 결과값을 사용하세요. 모든 처리는 브라우저에서 이루어지며, 선택한 색상 정보는 서버에 업로드되지 않습니다.

기존 인터페이스에서 작업한다면 먼저 코드베이스에서 이미 사용 중인 형식을 확인하세요. 불필요한 색상 변환을 피할 수 있고 풀 리퀘스트도 더 쉽게 검토할 수 있습니다. 외부 데이터를 살펴볼 때는 값을 겉보기에 같은 색상으로 바꾸기 전에 불투명도 정보가 포함되어 있는지 확인해야 합니다.

배포 전에는 원하는 색상을 선택하거나 재현하고, 적절한 표기법으로 값을 복사한 뒤 실제 컴포넌트 상태에서 확인하는 것이 좋습니다. 불투명도와 상속된 스타일에 따라 최종 렌더링 결과가 달라질 수 있으므로 기본, 호버, 포커스, 비활성화 상태를 각각 테스트하세요.

결과값을 읽는 방법

사용된 색상 모델에 맞춰 결과값을 읽고, 코드에 복사하기 전에 알파 값이 있는지도 확인하세요. RGB에서는 각 채널 값이 빨강, 초록, 파랑 성분의 강도를 각각 제어합니다. HSL에서 색상은 색상환을 따라 표시되고, 채도는 색의 선명도를, 명도는 검정과 흰색 사이의 균형을 조절합니다.

CSS나 구조화된 데이터에서 사용하는 색상 구문에는 엄격한 규칙이 적용됩니다. 직접 값을 수정할 때 흔히 발생하는 실수는 다음과 같습니다.

• CSS의 16진수 값 앞에 붙는 해시 기호를 빠뜨리는 경우
• 표준 16진수 길이로 유효하지 않은 5자리 또는 7자리 값을 사용하는 경우
• RGB 구현에서 채널 숫자를 요구하는 자리에 백분율을 넣는 경우
• 기존 RGB 구문에서 쉼표를 빠뜨리거나, 서로 호환되지 않는 이전 구문과 최신 구문을 섞는 경우
• 6자리 16진수만 허용하는 소프트웨어에 알파 값이 포함된 색상을 복사하는 경우
• CSS에서 요구하는 소수점 표기인 0.5 대신 소수점 쉼표를 쓴 0,5를 사용하는 경우

색상 선택기는 색상 값을 생성하는 도구이며, 범용 CSS 유효성 검사기는 아닙니다. 색상 값을 둘러싼 선언문이나 JSON 문서, 테마 파일 전체의 유효성까지 확인해 주지는 않습니다. 따라서 색상 값 밖에 있는 구문 오류는 해당 파서나 개발 도구로 별도로 검사해야 합니다.

색상 변환 예시

6자리 16진수 색상에서는 두 자리씩 빨강, 초록, 파랑에 대응합니다. 예를 들어 다음 표기들은 모두 불투명한 동일 색상을 나타냅니다.

16진수 값 #336699

RGB 환산값 rgb(51, 102, 153)

HSL 환산값 hsl(210, 50%, 40%)

3자리 16진수는 축약 표기입니다. 각 자리를 한 번씩 반복하면 6자리 값이 됩니다.

축약 16진수 값 #fff

확장된 16진수 값 #ffffff

RGB 환산값 rgb(255, 255, 255)

8자리 16진수는 빨강, 초록, 파랑 값 뒤에 알파 값을 포함합니다. 채널 순서가 다르거나 8자리 표기를 지원하지 않는 시스템도 있으므로 주의하세요. 겉으로 같은 단색이라도 다른 배경 위에 불투명도가 적용되면 결과가 달라질 수 있습니다.

어떤 색상 형식을 선택해야 하나요?

특별히 바꿔야 할 이유가 없다면 값을 사용할 곳에서 이미 요구하는 색상 표기법을 선택하세요. 6자리 16진수는 간결하고 CSS 변수와 디자인 토큰 파일에서 널리 쓰입니다. 소프트웨어가 채널 값을 직접 제공할 때는 RGB가 편리하며, 명도나 채도를 조정해 연관된 색상을 만들 때는 HSL이 유용합니다.

• 짧고 누구나 알아보기 쉬운 불투명 웹 색상이 필요하다면 6자리 16진수를 사용하세요.
• 대상 환경이 해당 표기법의 알파 값을 명시적으로 지원할 때만 8자리 16진수를 사용하세요.
• 빨강, 초록, 파랑 채널을 개별적으로 다룰 때는 RGB 또는 RGBA를 사용하세요.
• 색상, 채도, 명도를 기준으로 테마 변형을 프로그래밍 방식으로 만들 때는 HSL 또는 HSLA를 사용하세요.
• 이미 값이 있고 새 색상을 눈으로 고르는 대신 다른 형식으로 바꿔야 한다면 색상 변환기를 사용하세요.

화면에 표시된 RGB 값을 인쇄 사양으로 사용해서는 안 됩니다. 상업 인쇄에는 CMYK 값, ICC 색상 프로필, 교정 작업, 인쇄 업체와의 협의가 필요할 수 있습니다. 수학적 변환만으로는 인쇄된 색상이 백라이트 화면의 색상과 일치한다고 보장할 수 없습니다.

색상을 선택하거나 변환하지 않아도 되는 경우는 언제인가요?

기존 값이 이미 사용할 곳에서 요구하는 형식이라면 색상을 다시 선택하거나 변환할 필요가 없습니다. 변환을 반복하면 반올림 차이, 일관되지 않은 영문 대소문자 표기, 소스 파일의 불필요한 변경이 생길 수 있습니다.

테마 변수처럼 이름이 지정된 디자인 토큰은 리터럴 값으로 바꾸지 않고 그대로 두는 편이 나을 수도 있습니다. 토큰은 컴포넌트 사이의 관계를 유지하며 색상을 한곳에서 일괄 변경할 수 있게 해 줍니다. 마찬가지로 기계에서만 사용하는 색상은 누군가 직접 확인하거나 유지 관리해야 하는 경우가 아니라면 사람이 읽기 쉬운 형식으로 바꿀 필요가 없습니다.

색상 선택기만으로는 선택한 색상의 대비가 충분한지, 브랜드 사양에 맞는지, 색각 이상이 있는 사람도 구분할 수 있는지 판단할 수 없습니다. 전경색과 배경색의 조합은 전용 대비 검사 도구로 확인하고, 실제 인터페이스에서도 살펴보세요.

자주 묻는 질문

결과값을 CSS 변수에 사용할 수 있나요?

네. 선택한 표기법이 지원 대상 브라우저와 빌드 도구에서 유효한 CSS라면 사용할 수 있습니다. 전체 값을 사용자 지정 속성에 저장한 다음 var() 함수로 참조하세요. 프로젝트에서 채널을 따로 조작한다면 기존 프로젝트 규칙에 맞춰 각 채널을 저장하는 편이 더 편리할 수 있습니다.

같은 색인데 다른 화면에서는 왜 다르게 보이나요?

디스플레이마다 보정 상태, 밝기, 패널 기술, 색 영역 지원 범위가 다르기 때문입니다. 브라우저의 색상 관리 방식과 운영체제의 디스플레이 프로필도 렌더링에 영향을 줄 수 있습니다. 따라서 숫자 값이 같아도 모든 기기에서 실제로 똑같이 보인다고 보장할 수는 없습니다.

16진수 영문을 대문자나 소문자로 쓰면 색상이 달라지나요?

아니요. 16진수 숫자 A부터 F까지는 대소문자를 구분하지 않으므로 #AABBCC와 #aabbcc는 같은 색상을 나타냅니다. 서식만 달라지는 변경을 피하려면 저장소에서 사용하는 대소문자 규칙을 따르세요.

색상 값에 악센트 문자나 라틴 문자가 아닌 글자를 넣을 수 있나요?

표준 16진수, RGB, HSL 표기법은 ASCII 숫자, 문자, 문장 부호를 사용합니다. 악센트 문자나 라틴 문자가 아닌 글자는 이러한 숫자 기반 색상 구문에 포함되지 않습니다. 다만 사용하는 언어와 파일 인코딩에서 허용한다면 주변의 변수 이름이나 메타데이터에는 들어갈 수 있습니다.

완전히 투명한 색상은 색상이 없는 것과 같은가요?

아니요. 완전히 투명한 색상도 그 자체로는 보이지 않을 뿐 채널 값을 가지고 있습니다. 숨겨진 채널 값은 애니메이션, 보간, 합성 또는 이후의 불투명도 변경 과정에서 영향을 줄 수 있습니다. 애플리케이션이 이러한 동작에 의존한다면 해당 값을 그대로 유지하세요.

소수로 된 채널 값은 반올림해야 하나요?

소수로 된 색상 채널과 알파 값은 사용할 곳에서 허용하고 일관된 출력에 필요한 정밀도까지만 반올림하세요. 정밀도가 지나치면 값을 검토하기 어려워지고, 너무 크게 반올림하면 색상이 조금 달라질 수 있습니다. 반올림한 뒤에는 의도한 배경과 각 상호작용 상태에서 컴포넌트가 어떻게 렌더링되는지 확인하세요.