HEX, RGB, HSL: 웹 색상 형식 고르기

이 표기법들의 모든 색은 다른 옷을 입은 같은 sRGB 색입니다. HEX는 16진법으로 쓴 RGB입니다. #4F46E5는 빨강, 초록, 파랑 채널을 각각 두 자리 16진수로 나타낸 것입니다. rgb(79, 70, 229)는 같은 세 채널을 10진수로 말하고, hsl()은 같은 픽셀을 색상환 위의 위치로 기술합니다.

sRGB 안에서 셋 사이의 변환은 무손실입니다. #4F46E5, rgb(79, 70, 229), 그리고 동등한 hsl() 값은 정확히 왕복하므로, 표기법을 바꾸는 것은 표현의 선택이지 색의 변경이 아닙니다.

• HEXHEX는 간결하고 안정적이라 디자인 도구와 코드 사이를 복사-붙여넣기에 좋습니다. 팔레트와 스타일 가이드가 보통 hex로 공개되는 이유입니다.
• RGBRGB는 0부터 255까지의 세 채널 강도로 읽히며, 화면과 이미지 형식이 실제로 픽셀을 저장하는 방식과 일치합니다.
• HSLHSL은 색상, 채도, 명도로 읽혀 사람이 색을 말하는 방식에 더 가깝고, 의도에 맞춰 조정하기 훨씬 쉽습니다.

투명도는 모든 표기법에 덧붙습니다. rgb()와 hsl()은 네 번째 인자—rgba(79, 70, 229, 0.5)—를 받고, HEX는 여덟 자리 형태 #4F46E580을 얻었는데, 마지막 한 쌍이 00부터 FF까지의 알파입니다.

• 0–1 또는 00–FF알파는 함수 표기법에서 0부터 1, hex에서 00부터 FF까지입니다. 0.5와 80은 같은 반투명 값입니다.
• 표면에서 테스트반투명 오버레이는 아래에 있는 무엇이든과 곱해지므로, 반투명 토큰은 놓일 수 있는 모든 표면에서 테스트가 필요합니다.
• 연결된 토큰디자인 시스템이 같은 색조의 불투명 버전과 반투명 버전을 함께 내놓을 때, 여덟 자리 hex 하나가 둘의 관계를 눈에 보이게 유지합니다.

RGB 채널을 직접 편집하는 것은 산수지만, 의도를 편집하는 것은 HSL이 더 쉽습니다. 틴트는 같은 색상에 명도를 올린 것, 셰이드는 명도를 내린 것, 탁한 변형은 채도를 낮춘 것입니다. 세 채널이 함께 표류하는 대신 다이얼 하나짜리 동작 세 번입니다.

색상 톤 생성기는 그 램프를 기계적으로 만듭니다. hex 색 하나를 주면 검정 방향과 흰색 방향으로 섞어, 균등 간격의 3~20단계를 hex 값으로 돌려줍니다. 호버 상태와 테두리 톤이 손으로 고른 추측이 아니라 같은 원본 색에서 나옵니다.

• 틴트와 셰이드틴트와 셰이드: 색상과 채도를 고정하고 명도를 거의 흰색에서 거의 검은색까지 쓸면 배경, 상태, 텍스트에 쓸 수 있는 실용적인 램프가 나옵니다.
• 채도 상태탁한 버전과 선명한 버전은 채도 다이얼 하나에서 나오며, 호버와 비활성 상태가 같은 계열에 머무는 것도 이 방식입니다.
• 색상 회전색상 회전은 친척 색을 만듭니다. 유사색 이웃은 약 30도 안에, 보색은 180도 반대편에 있습니다.

색상 조화는 색상환 위의 기하학입니다. 보색 쌍은 마주 보고, 삼각 조합은 환을 3등분하고, 유사색 무리는 뭉쳐 있습니다. HSL은 그 계산을 보이게 합니다. 숫자 하나를 바꾸면 전체 스킴이 움직입니다.

색상 조합 생성기는 바로 그 모델을 적용합니다. 여섯 자리 시드 hex 하나에서 유사, 보색, 분할 보색, 삼각, 사각, 단색의 여섯 가지 고전 스킴으로 다섯 색 팔레트를 만들고, 각 견본과 흑백 텍스트의 대비를 3, 4.5, 7의 WCAG 비율 목표로 검사합니다.

결과는 CSS 사용자 정의 속성과 JSON으로 보낼 수 있어 팔레트가 스타일시트나 토큰 파일에 바로 들어갑니다. 엔진이 결정적이므로 같은 시드와 스킴은 항상 같은 다섯 색을 재현합니다. 스크린샷이 아니라 시드를 공유하세요.

현대 CSS는 옛 함수 형태를 통합했습니다. 공백으로 구분한 채널에 알파용 슬래시를 선택적으로 붙이는 형태—rgb(79 70 229 / 0.5)—가 쉼표 투성이 rgba()를 대신합니다. 레벨 4 명세는 또한 hwb(), lab(), oklch() 같은 표기법을 추가해 더 넓은 색역과 지각적으로 균일한 램프를 가능하게 합니다.

어떤 표기법으로 표준화하든 두 색을 섞는 것은 채널별 연산입니다. 색상 믹서는 두 색을 선택한 가중치로 블렌딩하고 결과를 RGBA와 hex로 보고하므로, 두 브랜드 색 사이의 중간점을 눈대중이 아니라 계산으로 구할 수 있습니다.

같은 도구가 표기법의 다리 역할도 합니다. 한 형태로 색을 넣고 다른 형태로 결과를 읽어, 명세서는 hex인데 스타일시트가 rgb()로 쓰여 있을 때 산수를 정직하게 유지합니다.

• 새 문법공백 구분 채널과 슬래시 알파는 현재 모든 브라우저에서 유효하며, 쉼표 형태도 레거시 별칭으로 계속 지원됩니다.
• 왜 OKLCH인가oklch()는 HSL의 실제 결함을 고칩니다. HSL에서 같은 명도 단계는 색상에 따라 같게 밝아 보이지 않지만, OKLCH는 지각 명도를 일관되게 유지합니다.
• 신중한 채택새 표기법은 문제를 푸는 곳—일관된 램프, 넓은 색역 디스플레이—에서 채택하고, 도구와 관습이 이미 잘 작동하는 곳에서는 hex나 rgb()를 유지하세요.

팔레트가 이론에서 시작되는 일은 드뭅니다. 스크린샷, 로고, 사진에서 시작됩니다. 원본에서 정확한 픽셀 값을 읽는 것이 색상환 앞에서 견본을 눈대중하는 것보다 낫습니다.

이미지 컬러 피커는 탭 안에서 PNG, JPEG, WebP를 열고 클릭한 픽셀의 정확한 RGBA 값을 보고합니다. 레거시 자산에서 브랜드 색을 복구하거나 안티앨리어싱된 가장자리에 실제로 무엇이 들었는지 확인하는 데 유용합니다.

모든 것이 로컬에서 실행됩니다. 이미지는 브라우저에서 디코딩되며 업로드되지 않습니다. 아트워크가 아직 공개되지 않은 디자인일 때 중요한 점입니다. 뽑은 값을 톤이나 조화 도구로 가져가면 아트워크에서 팔레트까지의 전체 체인이 기기 안에 머뭅니다.