색상 선택기: HEX, RGB, HSL — 그리고 대비 검사를 건너뛰었습니다

우리의 상표 오렌지는 #E99537. 나는 그것을 좋아한다. It's 따뜻한, it's 다른 모든 사람들과 같은 오렌지가 아닙니다's, 그리고 그것은 싸움없이 우리의 파란색 옆에 앉아.

몇 달 동안 흰색의 링크 색상으로 사용했습니다.

그러다가 실제로 숫자를 실행했습니다. #E99537 에 #FFFFFF 의 명암비를 제공합니다 2.38:1. WCAG 2.1 SC 1.4.3 정상적인 원본을 위한 4.5:1 를 요구합니다. 그것은 does't를 위한 3:1 막대기를 맑게 하기 조차 큰 텍스트. 그 사이트에있는 모든 오렌지 링크는 내가 신경을 쓴다고 주장한 기준에 따라 읽을 수 없었습니다 - 그리고 그것은 내 모니터에서,내 사무실에서,내 눈으로 완벽하게 잘 보였습니다.

That's 색상에 관한 것: 색상에 대한 인식은 측정이 아닙니다. #E99537 우리 해군에 #0F172A 점수 7.50:1, 편안하게 AAA. 같은 색, 완전히 다른 평결, 그리고 그것에 눈을 가늘게 뜨고 나에게 말할 수 없었을 것입니다. 계산해야합니다.

X-1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 컬러 피커 에 Toolz.dev 변환 HEX,RGB, HSL 및 당신에게 명암비를 보여줍니다,브라우저에서, 업로드하지 않고. 이 가이드는 내가 원하는 것입니다 I'd 내가 그 링크를 발송하기 전에 읽습니다.

TL;DR: 사용 육 정적 값의 경우 HSL 필요할 때마다 파생하다 밝기는 에서 뺄 수 있는 숫자이므로 색상(호버 상태, 팔레트, 어두운 모드)입니다 RGBA/HSLA 알파가 필요할 때. 대비는 본문 텍스트의 경우 4,5: 1,대용량 텍스트의 경우 3:1 입니다 - 확인,don't eyeball it. 컬러 피커 변환과 비율이 수행됩니다. 그런 다음 중지합니다 그라데이션 생성기.

HEX, RGB, HSL: What's 실제 차이점?

모두 같은 sRGB 색을 묘사합니다. 다른 점은 각각 어떤 질문에 쉽게 답할 수 있느냐는 것입니다.

육

16진수로 3바이트. #4466EE 는 레드 44 (68), 녹색 66 (102), 파란색 EE (238). 속기 #RGB 각 쌍이 두 배가 될 때만 작동합니다 - #FF0000 로 붕괴한다 #F00, 하지만 #4466EE 줄일 수 없습니다. 8 자리 양식은 alpha: 를 추가합니다 #4466EE80 대략 50% 불투명합니다.

It's 는 컴팩트하고 모호하지 않기 때문에 CSS 의 기본값입니다. 또한 인간의 독서에 완전히 불투명하기 때문에 나는 한 번도 육각 코드를 본 적이 없으며 조금 덜 포화되도록 변경해야 할 사항을 알고 있습니다.

RGB

동일한 3 개의 수로, 소수, 0–255. 현대 CSS 색깔 4 문법은 쉼표를 떨어집니다: rgb(68 102 238 / 80%). RGB 는 자바 스크립트에서 원하는 것입니다,캔버스, 그리고 WebGL,왜냐하면 it's 형식은 모든 다운스트림이 실제로 소비하고 당신은 그것에 산술을 할 수 있기 때문입니다.

HSL - 그 자리를 차지하는 사람

색조(바퀴 주위 0~360°), 포화도(0~100%), 가벼움(0~100%). #4466EE 이다 hsl(228, 83%, 60%).

Here's 그게 왜 중요한가. A button's hover state should be "the same color,slitly darker." HEX that's 대답할 수 없는 질문. HSL 에서 it's 빼기:

.btn {
  background: hsl(228 83% 60%);   /* #4466EE */
}
.btn:hover  { background: hsl(228 83% 52%); }  /* darker  */
.btn:active { background: hsl(228 83% 44%); }  /* darker still */
.btn:disabled { background: hsl(228 22% 70%); } /* desaturated, lifted */

네 가지 상태,하나의 색조,디자인 도구가 없습니다. 이것이 HSL 이 내 툴킷에 있는 이유의 90%입니다.

캐치 - 그리고 it's 진짜 하나는 - HSL 가벼움은 아닙니다 지각적인. hsl(60 100% 50%) (노란색) 그리고 hsl(240 100% 50%) (파란색) 둘 다 50%의 가벼움을 주장하며, 그 중 하나는 망막을 태울 것이고 다른 하나는 거의 검은 색입니다.That's 문제는 OKLCH가 해결합니다.

알았어, 잠깐만

CSS 컬러 레벨 4 가져옵니다 oklch(L C H), L은 어디에 있는가 인식된 가벼움. 같은 L 을 가진 두 가지 색상은 진정으로 똑같이 밝게 보입니다. It's 는 모든 단계가 균등하게 간격을 둔 느낌의 음조 램프를 생성하는 데 적합한 도구이며,it's 는 I'd 가 오늘날 새로운 디자인 시스템에 사용하는 이유입니다. It's 또한 왜 linear-gradient(in oklch, blue, yellow) doens't는 중간에 회색으로 변합니다. 를 참조하세요 CSS 그라디언트 생성기 가이드.

CMYK

인쇄 전용. CSS 에는 CMYK 가 없습니다. 상표 가이드가 당신에게 CMYK 가치를 건네는 경우에,누군가는 sRGB 로 개조해야 하고,변환은 gamuts 가 진짜로 다르기 때문에 대략 입니다 - 인쇄 기계가 당신의 감시자 can't 를 명중할 수 있는 cyans 가 있고,그 반대도 얻습니다 둘 다 하나를 다른 것으로 변환하고 희망하기보다는 브랜드 가이드에 정의된 가치입니다.

그들 사이를 어떻게 변환합니까?

HEX → RGB 는 그냥 기본 변환입니다. #4466EE → 로 분할 44, 66, EE → 68, 102, 238.

RGB → HSL 은 최대/최소 채널을 찾는 것과 관련되며,평균에서 가벼움을 도출한 다음 거기에서 채도와 색조를 도출합니다. It's 열다섯 줄의 코드,그리고 나는 그 열다섯 줄을 메모리에서 정확히 제로 타임으로 작성했습니다. For a one-off,the 컬러 피커 즉시 수행합니다. For code:

const hexToRgb = (hex) => {
  const n = parseInt(hex.replace('#', ''), 16);
  return { r: (n >> 16) & 255, g: (n >> 8) & 255, b: n & 255 };
};

const rgbToHex = (r, g, b) =>
  '#' + [r, g, b].map(v => v.toString(16).padStart(2, '0')).join('');

그리고 실제로 중요한 것은 상대 휘도와 명암비입니다 WCAG 정의:

const luminance = (hex) => {
  const { r, g, b } = hexToRgb(hex);
  const [R, G, B] = [r, g, b]
    .map(v => v / 255)
    .map(v => (v <= 0.03928 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4));
  return 0.2126 * R + 0.7152 * G + 0.0722 * B;
};

const contrast = (a, b) => {
  const [x, y] = [luminance(a), luminance(b)].sort((m, n) => n - m);
  return (x + 0.05) / (y + 0.05);
};

contrast('#E99537', '#FFFFFF'); // 2.38  ← the one that got me
contrast('#E99537', '#0F172A'); // 7.50

그 녹색 계수를 주의하십시오: 0.2126 빨강, 0.7152 녹색, 0.0722 파랑. 녹색은 대략 나릅니다 70퍼센트 인지된 밝기의. That's 왜 동일한 HSL 밝기에서 밝은 녹색과 밝은 파란색은 전혀 비슷해 보이지 않으며, it's는 지각 색상 공간이 존재하는 전체 이유입니다.

실제로 어떤 대비 비율을 맞춰야 합니까?

추측이 아닌 계산된 일부 실수:

그 테이블에서 두 가지가 빠집니다.

#767676 흰색에서 AA를 통과하는 가장 밝은 회색입니다. 아닙니다 #888, 아니다 #999. 모든 "음소거 보조 text" 내가 야생에서 볼 색상은 그것을 지나서 한두 가지 그늘입니다. 외울 가치가 있습니다.

동일한 브랜드 색상은 어디에 두느냐에 따라 통과하거나 실패할 수 있습니다. 우리의 오렌지는 백색에 연결로 사용할 수 없고 해군에 악센트로 우수합니다. 저 isn't 는 색깔에 있는 결점입니다; it's 는 색깔이 어디에 살 것이 허용되는지에 대한 제약입니다. 일단 제가 그렇게 짜맞추면 디자인 결정은 더 어려워지지 않고 쉬워졌습니다.

Doesn't Fight Itself 팔레트를 어떻게 구축하나요?

한 가지 색조를 선택하십시오. 가벼움을 다양하게하십시오. That & # 39;s 전체 방법,그리고 HSL 은 그것을 기계적으로 만듭니다:

:root {
  /* One hue: 228. Nine steps of lightness. */
  --blue-50:  hsl(228 83% 96%);
  --blue-100: hsl(228 83% 91%);
  --blue-200: hsl(228 83% 84%);
  --blue-300: hsl(228 83% 76%);
  --blue-400: hsl(228 83% 68%);
  --blue-500: hsl(228 83% 60%);  /* #4466EE — the brand colour */
  --blue-600: hsl(228 83% 50%);
  --blue-700: hsl(228 78% 41%);
  --blue-800: hsl(228 72% 33%);
  --blue-900: hsl(228 66% 25%);
}

주의 채도는 어두운 끝에서 약간 떨어집니다. 가벼움이 떨어지는 동안 채도를 일정하게 유지하면 점점 더 거칠고 네온처럼 보이는 단계가 생성됩니다. 하단의 작은 불포화는 램프가 생성되기보다는 설계된 느낌을주는 것입니다.

그런 다음 이름을 지정합니다 역할외관이 아니라 브랜드 변경은 40개 파일에서 찾아서 교체하는 대신 한 줄로 변경하는 것입니다:

:root {
  --color-primary: var(--blue-500);
  --color-primary-hover: var(--blue-600);
  --color-text: #0F172A;
  --color-text-muted: #6B7280;   /* 4.83:1 on white — checked */
  --color-surface: #F8FAFC;
  --color-border: #E5E7EB;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-primary: var(--blue-400);  /* lift it — dark bg needs a lighter primary */
    --color-text: #F8FAFC;
    --color-text-muted: #9CA3AF;
    --color-surface: #1E293B;
    --color-border: #374151;
  }
}

다크 모드는 반전이 아닙니다

팔레트를 뒤집지 마십시오. 두 가지가 즉시 깨집니다:

1. 어두운 배경에서는 채도가 높은 색상이 더 커집니다. "professional"로 읽히는 생생한 파랑은 백색에 "vibrating"로 읽습니다 가까운 검정. lift 가벼움,떨어지 채도 조금.
2. 순수한 검은 색 배경은 halation을 유발합니다- 밝은 텍스트가 켜져 있습니다 #000 난시가 있는 사람을 위한 도말. 매우 어두운 회색-파란색을 사용하십시오(#0F172A, #111827대신 ). 그것은 또한 당신에게 순수한 검정 doesn't 인 상승한 표면을 위해 갈 것이다 어딘가를 준다.

솔직히 조화 계획

내가 계속 돌아 오는 규칙: 기본 램프 1개, 액센트 1개, 회색 경사로. 그 이상의 모든 것은 그 존재를 정당화해야 합니다.

또 무엇이 사람들을 여행하게 합니까?

색상만으로는 결코 충분하지 않습니다

남성 12 명 중 1 명,여성 200 명 중 1 명 정도가 어떤 형태로든 색각 결핍증을 앓고 있습니다. 빨간색-평균-오류와 녹색-평균-성공이 당신의 경우 오직 signal, 사용자의 의미 있는 조각에는 두 개의 동일한 회색 배지가 표시됩니다. 아이콘을 추가하고 단어를 추가하세요. WCAG SC 1.4.1 이에 대해 명시적이며 비용이 많이 듭니다 <span>.

1초 테스트: UI를 스크린샷으로 찍어 채도를 낮추고 여전히 작동하는지 확인하세요. does't인 경우 색상은 하중 지지 작업을 수행해야 합니다't는 혼자 수행해야 합니다.

초점 링에도 대비가 필요합니다

초점 표시기는 UI 구성 요소이며 3:1 규칙에 속합니다 인접해 색상 - 이는 초점 링이 둘러싸는 요소와 그 뒤에있는 페이지 모두와 대비되어야 함을 의미합니다. 파란색 버튼의 미묘한 파란색 윤곽선은 일반적이고 완전히 보이지 않는 실패입니다.

회색으로 먼저 디자인하세요

전체 레이아웃을 그레이스케일로 빌드합니다. 계층구조가 크기,무게, 간격에서 오도록 강제합니다 - 여기서 계층구조가 됩니다 해야한다 에서 오세요. 강조점으로 색상을 마지막으로 추가하세요. 이렇게 구축된 인터페이스는 거의 우연히 액세스할 수 있으며 다시 작성하지 않고도 다크 모드에서 살아남습니다.

Color Picker 사용하기

1. 열다 컬러 피커.
2. 스펙트럼을 드래그하거나 알려진 값을 HEX, RGB 또는 HSL 필드에 붙여넣으세요. 나머지는 단계적으로 업데이트됩니다.
3. HSL 에 주목하세요.That's 당신의 작업 형식.
4. H와 S를 잡고 L을 밟아 경사로를 생성합니다.
5. 4.5:1 줄에 대해 모든 텍스트/배경 쌍을 확인합니다 전에 클라이언트가 이에 대해 이메일을 보낸 후가 아니라 스타일시트에 들어갑니다.

모든 것이 탭에서 실행됩니다. 아무것도 업로드되지 않습니다. DevTools 네트워크 패널에서 약 10초 안에 이를 확인할 수 있습니다.

자주 묻는 질문

What's 는 HEX 와 RGB 의 차이점?

아무것도,의미론적으로 - 그들은 같은 세 sRGB 채널을 인코딩합니다. HEX 는 그들을 기본 16 (#4466EE), 소수점 이하 RGB(rgb(68 102 238)). HEX 는 더 컴팩트하고 CSS 규칙입니다; RGB 는 JavaScript 에서 계산하기가 더 쉽습니다. 원칙 당이 아닌 컨텍스트 당 선택.

CSS에서는 어떤 색상 형식을 사용해야 합니까?

HEX for static values you're just transcribing. HSL 언제라도 당신이 필요로 파생하다 색상 - 호버 상태, 비활성화된 상태, 톤 램프, 다크 모드 변형 - 밝기는 조정할 수 있는 숫자이기 때문입니다. 알파가 필요할 때 HSLA 또는 RGBA. OKLCH if you're building a new design system and want perceptually even steps.

내 색상에 액세스할 수 있는지 어떻게 알 수 있나요?

명암비를 계산합니다. WCAG 2,1 AA 는 일반 텍스트의 경우 4,5: 1,대용량 텍스트 (18pt,또는 14pt bold) 의 경우 3:1 이 필요하며 UI 구성 요소의 경우 눈으로 판단하지 마십시오 - #E99537 흰색은 괜찮아 보이고 점수는 2.38:1입니다. 또한 색상만으로는 정보가 전달되지 않는지 확인하십시오.

흰색 텍스트에 사용할 수 있는 가장 밝은 회색은 무엇입니까?

#7676764.54:1에 도달합니다. 4.5:1 AA 라인을 거의 넘지 않습니다. #999999 는 2.85:1 에 불과하며 실패합니다. AAA를 원한다면 #595959 정확히 7.00:1을 칩니다.

HSL 밝기가 인지된 밝기와 일치하지 않는 이유는 무엇입니까?

HSL은 RGB의 간단한 수학적 변환이지 인간의 시각 모델이 아니기 때문입니다 눈은 파란색보다 녹색에 훨씬 더 민감합니다 - WCAG 휘도 공식은 0.7152에서 녹색, 0.0722에서 파란색의 가중치를 갖습니다 - 그래서 hsl(60 100% 50%) (노란색) 그리고 hsl(240 100% 50%) (파랑) 둘 다 주장에도 불구하고 아무것도 비슷하게 보이지 50% 가벼움. OKLCH는 특별히이 문제를 해결하기 위해 존재합니다.

다크 모드 팔레트를 어떻게 구축합니까?

Don't 는 가벼운 것을 반전합니다. 두번째 팔레트를 구축하십시오: 순수한 검정 보다는 오히려 어두운 회색 파란 배경 (순수한 검정색은 난시가 있는 독자를 위한 halation 를 일으키는 원인이 됩니다), 당신의 악센트의 더 가볍고 약간 보다 적게 포화 버전,그리고 that's 를 보다는 오히려 미색 원본 #FFFFFF. 아래에서 CSS 사용자 정의 속성으로 교체하세요 prefers-color-scheme: dark.

What's는 클릭 유도 문구 버튼에 가장 적합한 색상인가요?

There isn't one. "orange converts best"에 대한 증거는 얇고 대부분 민속입니다. 중요한 것은 CTA 가 주변의 모든 것과 대조되며 동일한 색상이 사이트의 모든 곳에서 동일한 것을 의미한다는 것입니다. 페이지가 대부분 파란색 인 경우 주황색 CTA 가 작동합니다 - 주황색이 아니라 대비 때문입니다.

웹에서 CMYK 색상을 사용할 수 있나요?

아니요 - CSS 에는 CMYK 표기법이 없으며 gamuts don't 는 깔끔하게 매핑되므로 모든 변환은 근사치입니다. 인쇄 및 화면에서 브랜드 일관성이 필요한 경우 하나를 다른 값으로 변환하는 대신 처음부터 브랜드 가이드에서 두 값을 모두 정의하십시오.

16진수 색상을 RGB로 변환하려면 어떻게 해야 합니까?

여섯 자리 16 진수를 세 쌍으로 나누고 각 쌍을 0 에서 255 까지 16 진수로 읽습니다. #4466EE 된다 rgb(68, 102, 238): 44 는 68,66 은 102,EE 는 238 입니다. 와 같은 세 자리 약칭 #46E 각 숫자를 두 배로 늘려 먼저 확장합니다. Color Picker 는 이 변환을 양방향으로 즉시 수행합니다.

육각 색상 코드 란 무엇입니까?

16진수 색상 코드는 sRGB 색상의 6자리 기본 16 표현으로, 선행 후 빨간색, 녹색 및 파란색 채널에 대해 각각 두 자리를 사용합니다 #. #FFFFFF 는 흰색과 #000000 는 검정색입니다. 선택적인 일곱 번째와 여덟 번째 숫자는 에서와 같이 알파 (불투명도) 채널을 추가합니다 #4466EE80.

감싸는 중

색상 작업은 두 부분으로 구성되며 우리 대부분은 첫 번째 부분만 수행합니다. 팔레트를 선택하는 것은 재미있고 주관적인 절반입니다. 휘도, 대비, 색맹 가독성, 어두운 모드 동작 등 이를 확인하는 것은 that's의 절반입니다. 그냥 산술이고 it's는 사람들이 실제로 당신이 만든 것을 읽을 수 있는지 여부를 결정하는 절반입니다.

산술은 어렵지 않습니다. It's just something you have to 하다그리고 나는 몇 달 동안 내 사이트에서 내가 직접 선택한 색상으로 did't를 사용했습니다.

X-1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 컬러 피커 HEX,RGB, HSL 간에 변환하여 여러분에게 대비 비율을 제공하며,무료로 브라우저에서 완전히 사용할 수 있습니다. pair it with the 그라데이션 생성기 대비를 끝에서 끝까지 유지하는 블렌드의 경우 나머지 선반을 참조하세요 개발자 생산성 도구 가이드.