색상 가이드
화면 색상에 관한 짧고 실용적인 가이드: 형식, 대비, 팔레트, 다크 모드, CSS. 모든 수치는 직접 계산했고, 모든 예시는 복사할 수 있습니다.
- OKLCH 완벽 정리: 눈에 보이는 대로 작동하는 색상 포맷OKLCH는 색을 얼마나 밝아 보이는지, 얼마나 선명한지, 어떤 색조인지로 표현합니다. HSL과 달리 명도 값이 같으면 어떤 색조든 정말 같은 밝기로 보입니다. 그래서 팔레트, 호버 상태, 접근성 있는 대비를 예측하기 쉬워집니다.2026년 9월 28일2분 분량
- APCA vs WCAG 2: 어떤 명도 대비 기준을 믿어야 할까WCAG 2 명도 대비율은 법이 요구하는 기준입니다. APCA는 가독성을 훨씬 정확하게 예측하는 새로운 모델로, 특히 다크 테마와 채도 높은 색에서 강합니다. 둘 다 확인하면 기준을 지키면서도 실제로 읽기 쉬운 텍스트를 만들 수 있습니다.2026년 9월 28일2분 분량
- 색역 완벽 정리: sRGB, Display P3, 색역 밖의 색색역은 화면이나 색 공간이 표시할 수 있는 색의 범위입니다. 웹은 sRGB를 기반으로 만들어졌지만, 요즘 대부분의 스마트폰과 많은 노트북은 빨강, 초록, 주황이 눈에 띄게 더 선명한 Display P3를 표시합니다.2026년 9월 28일1분 분량
- 색상 포맷 완벽 정리: HEX, RGB, HSL, OKLCH 그리고 나머지같은 색도 열 가지가 넘는 방식으로 쓸 수 있습니다. 각 포맷이 무엇을 뜻하는지, 언제 쓰는지, 같은 색이 포맷마다 어떻게 표기되는지 알아봅니다.2026년 9월 28일1분 분량
- HEX 색상 코드 완벽 정리: #RRGGBB의 원리#1e90ff 같은 HEX 색상 코드는 16진수 두 자리씩 세 쌍으로 이루어집니다. 각 쌍은 빨강, 초록, 파랑 빛의 양을 00(없음)부터 ff(최대, 255)까지 나타냅니다. 네 번째 쌍을 붙이면 불투명도를 정할 수 있습니다. 80은 약 50%, ff는 완전히 불투명한 상태입니다.2026년 9월 28일4분 분량
- 웹사이트와 앱의 컬러 팔레트 정하는 법브랜드 색 하나에서 50~950 단계를 만들고, 브랜드 색이 살짝 섞인 회색과 의미 색상 네 가지를 더한 뒤, 모든 텍스트 조합의 대비와 색각 이상 시 구분을 확인하세요. 단계는 눈대중이 아니라 OKLCH 명도로 고르세요. 흰 배경에서는 색상과 상관없이 명도가 약 0.55 이하로 내려가면 텍스트가 WCAG AA를 통과합니다.2026년 9월 28일5분 분량
- 다크 모드 색상: 배경, 텍스트, 강조색 고르는 법순수한 검정 대신 #121212 같은 짙은 회색 배경을, 순수한 흰색 대신 #e5e5e5 같은 오프화이트 텍스트를 쓰고, 브랜드 색은 더 밝고 채도가 낮은 버전으로 바꾸세요. 텍스트는 WCAG 2와 함께 APCA로도 확인하세요. WCAG 2는 어두운 배경에서 대비를 실제보다 높게 평가하기 때문입니다.2026년 9월 28일5분 분량
- 색상 조화: 보색, 유사색, 3색 조화와 그 밖의 배색 규칙색상 조화는 색상환에서 정해진 각도만큼 떨어진 색상을 고르는 방법입니다. 보색은 180°, 유사색은 30°, 3색 조화는 120° 간격입니다. 색상을 HSL이 아니라 OKLCH에서 돌리면 모든 색의 밝기가 같게 유지되어, 한 색만 의도치 않게 튀는 일이 없습니다.2026년 9월 28일4분 분량
- CSS color-mix()와 상대 색상 문법: 틴트, 호버, 투명도color-mix()는 원하는 색 공간에서 두 색을 섞고, 상대 색상 문법은 oklch(from var(--brand) calc(l - 0.1) c h)처럼 기존 색의 채널 하나만 바꿉니다. 둘 다 브라우저에서 계산되고, CSS 변수와 함께 쓸 수 있으며, Sass 색 함수 대부분을 대체합니다. 틴트와 호버는 oklab에서, 투명도는 srgb에서 섞으세요.2026년 9월 28일5분 분량
- 색맹 친화 팔레트: 색상을 확인하고 고치는 방법색맹 친화 팔레트는 제1색맹, 제2색맹, 제3색맹, 그레이스케일 어느 조건에서도 모든 색상 쌍이 구분되는 팔레트입니다. 가장 확실한 해결책은 특별한 색조가 아니라 명도 차이입니다. OKLCH 명도가 0.2 정도 떨어진 색은 저희가 돌려 본 모든 시뮬레이션에서 구분되었습니다. 여기에 아이콘이나 텍스트 라벨을 함께 쓰세요. 색에만 의존하면 누군가는 반드시 정보를 놓칩니다.2026년 9월 28일5분 분량
- Tailwind CSS 색상: v4 OKLCH 팔레트, 커스텀 색상과 단계Tailwind CSS v4에는 50부터 950까지 11단계로 이루어진 색상 스케일 26개가 있습니다. 모두 286색이며 --color-blue-500 같은 CSS 변수로 OKLCH 값이 정의되어 있습니다. 직접 색을 추가하려면 @theme { --color-brand-500: oklch(...) }를 쓰면 됩니다. 같은 단계 번호라도 명도는 같지 않습니다. 흰색 위에서 4.5:1을 통과하는 가장 밝은 파랑은 blue-600이지만, 노랑은 700이 필요합니다.2026년 9월 28일5분 분량