이렇게 사용하세요
왼쪽 위 색 상자를 눌러 색을 고르거나, HEX·RGB·HSL 칸 중 아무 곳에나 코드를 붙여 넣으세요. 한 칸을 고치면 나머지 형식이 바로 따라 바뀌어요. #1e90ff, rgb(30 144 255 / 50%), hsl(210, 100%, 56%)처럼 흔히 쓰는 표기는 모두 읽을 수 있어요. 크롬 같은 일부 브라우저에서는 "화면에서 색 추출" 버튼으로 화면의 색을 바로 찍어 올 수도 있어요.
세 가지 색 표기와 명도 대비
HEX는 빨강·초록·파랑을 각각 두 자리 16진수(00~ff)로 적은 형식이고, 뒤에 두 자리를 더 붙이면 투명도예요. RGB는 같은 값을 0~255 십진수로 적어요. HSL은 색상(0~360도), 채도(%), 밝기(%)로 나타내서 "조금 더 밝게" 같은 조절이 쉬워요.
명도 대비는 두 색의 상대 휘도 L을 구해 (밝은 L + 0.05) ÷ (어두운 L + 0.05)로 계산해요. 결과는 1:1에서 21:1 사이예요. 버튼이나 배경색을 정할 때 흰 글자와 검은 글자 중 어느 쪽이 더 잘 읽히는지 여기서 바로 확인할 수 있어요.
자주 묻는 질문
틴트와 셰이드는 무엇인가요?
틴트는 원래 색에 흰색을, 셰이드는 검은색을 20%씩 섞은 단계예요. 버튼의 hover·active 색이나 배경용 옅은 색을 고를 때 편해요.
팔레트는 어디에 저장되나요?
이 브라우저의 localStorage에만 저장돼요. 다른 기기와 동기화되지 않고, 방문 기록을 지우면 함께 사라져요. "CSS 변수로 복사"로 백업해 두세요.
HSL로 바꿨다가 되돌리면 값이 조금 달라져요.
HSL은 소수 첫째 자리까지 반올림해 보여 주기 때문에 RGB로 되돌릴 때 1 정도 차이가 날 수 있어요. 정확한 값이 필요하면 HEX나 RGB를 기준으로 쓰세요.