색상을 선택하거나 코드(HEX/RGB/RGBA)를 입력하면 HEX·RGB·HSL·HSV·CMYK 변환, 보색/유사색 팔레트, WCAG 대비(콘트라스트)를 한 번에 확인할 수 있습니다.
색상 코드를 입력하거나 선택해주세요.
"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."
이 사이트는 광고 수익으로 유지되고 있습니다. 배너 또는 여기를 클릭하여 구매해 주시면 유지에 도움을 주실 수 있습니다.
색상 선택 도구란? — HEX/RGB/HSL 색상 코드를 빠르게 확인하는 방법
색상 선택 도구(컬러 피커)는 원하는 색을 선택하고, 그 결과를 HEX, RGB, HSL 같은 다양한 포맷으로 변환해주는 도구입니다. 웹/앱 개발에서는 버튼, 배경, 텍스트, 배지 등 UI 요소에 색상을 적용할 때 색상 코드가 필요합니다. 이 페이지에서는 색상 선택과 동시에 변환값, 팔레트(보색/유사색), 대비비율까지 함께 확인할 수 있습니다.
HEX / RGB / HSL 차이
- HEX: 웹에서 가장 흔한 색상 표현. 예:
#1677FF - RGB: 빨강/초록/파랑의 조합. 예:
rgb(22, 119, 255) - HSL: 색상(Hue), 채도(Saturation), 명도(Lightness)로 조정이 쉬워 "톤/무드" 작업에 유리
대비(콘트라스트)와 접근성(WCAG) — 텍스트가 읽히는지 확인하세요
같은 색이라도 배경과 텍스트 조합에 따라 가독성이 크게 달라집니다. 특히 버튼/배너/카드처럼 텍스트가 들어가는 UI는 대비비율(contrast ratio)이 중요합니다. 이 도구는 선택한 색상 기준으로 흰색/검정 텍스트 대비를 계산해, 어떤 텍스트 색이 더 안전한지 빠르게 판단할 수 있게 도와줍니다.
보색/유사색/삼색 조합 — 팔레트 추천이 필요한 이유
브랜드 컬러 하나만 있으면 UI가 단조로워 보일 수 있습니다.
- 보색: 포인트 강조(CTA 버튼, 알림 배지)에 유리
- 유사색: 동일 톤의 안정적인 레이아웃 구성에 유리
- 삼색 조합: 섹션별 역할(강조/보조/배경)을 나누기에 좋음
CSS에서 색상 코드를 활용하는 실전 팁
프로젝트에서는 색상을 값이 아니라 의미로 관리하는 편이 유지보수에 유리합니다. 예를 들어 CSS 변수로
--brand, --brand-text처럼 정의해두면, 테마 변경이나 다크모드 대응이 쉬워집니다. 이 도구의 CSS 변수 템플릿을 그대로 복사해 적용해보세요.Tailwind 색상 스케일(50~900) 자동 생성은 언제 유용할까?
Tailwind CSS는
blue-50부터 blue-900처럼 단계형 색상 스케일을 자주 사용합니다. 버튼의 hover, disabled, 배경/테두리/텍스트 같은 UI 상태를 만들 때 "한 색으로 다양한 톤"이 필요하기 때문입니다. 이 도구의 스케일 생성 기능을 사용하면, 브랜드 컬러 1개만 정해도 50~900 단계 색상을 빠르게 만들어 디자인 시스템/테마를 더 일관되게 구성할 수 있습니다."이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."
이 사이트는 광고 수익으로 유지되고 있습니다. 배너 또는 여기를 클릭하여 구매해 주시면 유지에 도움을 주실 수 있습니다.
"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."
이 사이트는 광고 수익으로 유지되고 있습니다. 배너 또는 여기를 클릭하여 구매해 주시면 유지에 도움을 주실 수 있습니다.