색상 형식이 중요한 이유
색상은 표면적으로 단순해 보입니다. 보고, 선택하고, 사용합니다. 그러나 전문적인 디자인 작업은 끊임없이 실망스러운 문제에 직면합니다. 동일한 색상이라도 사용 위치에 따라 표현이 다르며, 잘못된 형식을 선택하면 작업 흐름이 필요 이상으로 어려워집니다.
HEX: 웹 표준
다음과 같은 16진수 색상 코드#667eea웹 개발에서 가장 일반적인 형식입니다. 빨간색, 녹색 및 파란색 값(0~255)을 6자리 문자열로 연결된 두 자리 16진수로 인코딩합니다. 형식은 컴팩트하고 쉽게 복사할 수 있으며 CSS, HTML 및 디자인 도구에서 보편적으로 지원됩니다.
세 쌍이 모두 동일한 숫자인 경우 코드가 단축될 수 있습니다.#ffffff된다#fff. 이 단축어는 모든 주요 브라우저와 전처리기에서 작동합니다.
RGB: 투명성 및 프로그래밍 방식 제어
RGB(및 그 변형 RGBA)는 투명도가 필요하거나 프로그래밍 방식으로 색상을 계산할 때 선호되는 형식이 됩니다.RGBA(102, 126, 234, 0.5)색상에 50% 불투명도를 제공합니다. HEX로 직접 표현하는 것은 불가능합니다(HEX는 다음과 같은 8자 형식을 지원하지만).#667eea80아는 개발자가 거의 없습니다).
HSL: 팔레트 빌더의 비밀 무기
HSL(Hue, Saturation, Lightness)이 가장 좋습니다.사람이 읽을 수 있는색상 형식. 색조는 색상환의 각도(0~360°)입니다. 채도는 색상이 얼마나 선명한지를 나타냅니다. 가벼움은 얼마나 밝거나 어둡습니까?
이렇게 하면 팔레트 생성이 매우 쉬워집니다. 디자인 시스템에 대해 동일한 색조의 10가지 음영을 생성하려면:
- H와 S를 동일하게 유지
- L을 10, 20, 30, 40, 50, 60, 70, 80, 90, 95로 설정합니다.
- 이제 완전한 10단계 색상 척도가 생겼습니다.
접근성: 명암비
WCAG 2.1 AA 접근성 표준에서는 일반 크기 텍스트의 경우 텍스트와 배경 간 명암비가 4.5:1, 큰 텍스트의 경우 3:1을 요구합니다. UI에서 색상 조합을 마무리하기 전에 명암비를 테스트하세요. 실패한 명암비는 웹 디자인에서 가장 흔한 접근성 위반 중 하나입니다.
| 기준 | 일반 텍스트 | 큰 텍스트(18pt+) |
|---|---|---|
| WCAG AA | 4.5:1 | 3:1 |
| WCAG AAA | 7:1 | 4.5:1 |
인쇄할 때와 화면에서 색상이 다르게 보이는 이유는 무엇입니까?
화면은 RGB(Additive Light) 모델을 사용합니다. 프린터는 CMYK(감산 잉크)를 사용합니다. 동일한 HEX 색상이라도 인쇄하면 눈에 띄게 다르게 보일 수 있습니다. 정확한 인쇄 색상 작업을 위해서는 Adobe Illustrator 또는 InDesign과 같은 전문 도구에서 CMYK로 변환하세요.
스포이드 도구는 실제로 무엇을 수행합니까?
스포이드는 브라우저의 EyeDropper API를 사용하여 브라우저 창뿐만 아니라 화면의 어느 곳에서나 픽셀 색상을 샘플링합니다. 모든 픽셀의 정확한 RGB 값을 읽고 이를 세 가지 형식 모두로 즉시 변환합니다.