색을 고르고 다듬는 순서
색부터 정하기
기준이 될 색이 이미 있다면 색상 변환기로 HEX·RGB·HSL 값을 오가며 필요한 형식으로 바꿉니다. 참고할 사진이나 시안 이미지가 있다면 이미지 색상 추출로 그 안에서 실제로 많이 쓰인 색을 뽑아낼 수 있어, 브랜드 이미지와 어울리는 색을 고르기 쉬워집니다.
색 하나가 정해지면 팔레트 생성기로 그 색과 어울리는 조합을 만들어 봅니다. 배경에 깊이를 주고 싶을 때는 그라데이션 생성기로 두 색 사이의 자연스러운 흐름을 만들고 CSS 코드를 그대로 복사할 수 있습니다.
읽히는지 반드시 확인하세요
배경색과 글자색을 정한 뒤에는 명암대비 검사기로 대비를 확인하는 단계가 필요합니다. 화면에서 예뻐 보이는 조합도 대비가 낮으면 밝은 곳이나 저시력 사용자에게는 읽히지 않습니다. 웹 접근성 지침 WCAG의 AA 성공기준은 본문 글자에 4.5:1 이상, 큰 글자에 3:1 이상의 대비를 요구합니다. 이 기준은 WCAG 2.2에서도 그대로 유지됩니다.
마감을 다듬는 도구
박스 그림자 생성기로 카드나 버튼의 그림자를 조절하고, 글래스모피즘 생성기로 반투명 유리 느낌을 만들 수 있습니다. 움직임이 필요하면 cubic-bezier 생성기로 가속 곡선을 직접 그려 보며 애니메이션 감을 맞추고, CSS 로더 생성기로 로딩 표시를 만들 수 있습니다. 모든 도구가 결과를 CSS 코드로 보여 주므로 그대로 복사해 사용하면 됩니다.
HEX·RGB·HSL은 같은 색의 다른 표기입니다
세 가지 표기는 서로 다른 색이 아니라 같은 색을 다르게 적은 것입니다. HEX(#3B82F6)와 RGB(59, 130, 246)는 빨강·초록·파랑의 밝기를 그대로 적는 방식이고, HSL은 색상(어떤 색인지)·채도(얼마나 선명한지)·밝기(얼마나 밝은지) 세 축으로 나눠 적습니다.
HSL이 유용한 이유는 색을 조금씩 조정하기 쉽기 때문입니다. 같은 색의 밝은 버전과 어두운 버전이 필요할 때, HEX 값에서는 어떤 숫자를 얼마나 바꿔야 할지 감이 오지 않지만 HSL에서는 밝기 값만 올리고 내리면 됩니다. 버튼의 기본·마우스오버·눌림 상태처럼 한 색의 여러 단계를 만들 때 특히 편합니다.
다크 모드까지 고려한다면
밝은 배경에서 잘 어울리던 색이 어두운 배경에서는 지나치게 쨍하거나 반대로 묻혀 보이는 일이 많습니다. 어두운 배경에서는 채도를 조금 낮추고 밝기를 올린 버전을 따로 준비하는 것이 일반적인 방법입니다. HSL 표기를 쓰면 이 조정이 쉬워집니다.
특히 순수한 검정(#000000) 배경에 순수한 흰색(#FFFFFF) 글자는 대비가 지나쳐 눈이 쉽게 피로해집니다. 배경은 아주 어두운 회색, 글자는 약간 낮춘 흰색을 쓰는 편이 오래 봐도 편안합니다. 두 조합 모두 명암대비 검사기로 확인해 두면 안심할 수 있습니다.
브랜드 색을 정하는 순서
색을 하나씩 즉흥적으로 고르면 나중에 화면마다 톤이 달라집니다. 먼저 주 색상 하나를 정하고, 그 색의 밝기를 조절해 밝은 단계와 어두운 단계를 만든 뒤, 강조에 쓸 보조 색상 하나를 더하는 정도가 관리하기 좋은 구성입니다. 색이 다섯 가지를 넘어가면 어디에 무엇을 쓸지 스스로도 헷갈리기 시작합니다.
여기에 회색 계열 서너 단계를 더하면 본문 글자·설명 글자·테두리·배경을 구분할 수 있어 화면이 정돈돼 보입니다. 마지막으로 성공·경고·오류를 알리는 색을 정하는데, 이 세 가지는 사용자가 이미 익숙한 초록·노랑·빨강 계열에서 크게 벗어나지 않는 편이 이해하기 쉽습니다.
자주 묻는 질문
HEX와 RGB 중 어느 쪽을 써야 하나요?
웹 스타일시트에서는 둘 다 동작합니다. 투명도를 함께 지정해야 한다면 rgba나 HSL 형식이 편하고, 디자인 도구와 값을 주고받을 때는 HEX가 간결합니다.
명암대비는 얼마나 확보해야 하나요?
WCAG의 AA 성공기준은 본문 글자에 4.5:1 이상, 18pt 이상 또는 굵은 14pt 이상의 큰 글자에 3:1 이상을 요구합니다. 검사기가 기준 통과 여부를 함께 표시합니다.
추출한 팔레트를 그대로 써도 되나요?
이미지에서 뽑은 색은 출발점으로 삼고, 실제 화면에서는 밝기와 채도를 조금씩 조정해 쓰는 편이 좋습니다. 사진에서 잘 어울리던 색이 넓은 면적의 배경으로 쓰이면 지나치게 강해 보이는 경우가 많습니다.
만든 CSS를 어디에 붙여 넣나요?
각 도구가 출력하는 코드는 표준 CSS라 스타일시트나 인라인 style 속성 어디에나 넣을 수 있습니다. 프레임워크를 쓰는 경우에도 동일하게 동작합니다.