핵심 정리
- 누른 자리 한 점의 색을 HEX, RGB, HSL로 보여 주고, 단추 하나로 복사해요.
- 사진은 서버로 올라가지 않아요. 이 기기 브라우저 안에서만 열어 봐요.
- 큰 사진은 긴 변 1,600픽셀로 줄여서 읽어요. 줄일 때 이웃 픽셀이 섞여 아주 작은 점은 색이 조금 달라질 수 있어요.
- JPG 사진은 압축 때문에 같은 색 면도 픽셀마다 조금씩 달라요. 몇 군데 눌러 보고 고르세요.
같은 색을 적는 세 가지 방법
모두 같은 색을 다른 방식으로 적은 거예요.
| 방식 | 예시 | 읽는 법 |
|---|---|---|
| HEX | #1E90FF | 빨강, 초록, 파랑을 16진수 두 자리씩 |
| RGB | rgb(30, 144, 255) | 빨강, 초록, 파랑을 0~255 숫자로 |
| HSL | hsl(210, 100%, 56%) | 색상(도), 채도(%), 밝기(%) |
디자인 프로그램은 대개 HEX 칸이나 RGB 숫자 칸이 있어요. 원하는 쪽을 복사해 넣으세요.
출처
- W3C CSS Color Module Level 4(2026-09-30 판), 6.1 Named Colors: 색 이름과 HEX 값. 7.1 Converting HSL Colors to sRGB: HSL과 RGB 변환식
- W3C WCAG 2.2(2024-12-12 권고), 용어 relative luminance와 contrast ratio, 성공 기준 1.4.3 최소 대비(4.5 : 1, 큰 글자 3 : 1), 1.4.6 향상된 대비(7 : 1)
- 한국형 웹 콘텐츠 접근성 지침 2.2(KS X OT0003:2022), 5.4.3 텍스트 콘텐츠의 명도 대비: 4.5 대 1 이상
2026년 10월 5일에 다시 확인했어요.