처음이라 막막한 사람에게
색 표기를 처음 보면 어디서 시작해야 할지 막막하다. #FFFFFF, rgb(255,255,255), hsl(0,0%,100%). 같은 색이 다른 표기로 적혀 있다. 차근차근 풀어 본다.
STEP 1: 색은 표기법이 여러 가지
같은 빨강도 #FF0000, rgb(255,0,0), hsl(0,100%,50%)로 적힐 수 있다. 자료에 따라 표기가 다르고, 매체에 따라 권장 표기가 다르다. 한 번 차이를 인식하는 게 출발점.
STEP 2: 가장 흔한 표기는 HEX
웹 페이지·CSS·디자인 도구 대부분 HEX(#FFFFFF) 사용. 처음에는 HEX 한 가지만 익혀도 충분.
STEP 3: 도구에 한 표기 입력
도구 입력 칸에 HEX 코드를 한 번 넣어 본다. 예: #FF6B6B. 결과 화면에 RGB·HSL 값이 자동으로 떨어진다. 색상 변환기는 한 표기를 넣으면 다른 표기들이 한 화면에 동시 표시.
STEP 4: 결과 해석
- HEX → 코드용, 16진수
- RGB → 빨강·초록·파랑 0~255
- HSL → 색상·채도·명도 직관 표기
- CMYK → 인쇄용
STEP 5: 반대 방향 시도
이번에는 RGB 값을 입력해 본다. 예: rgb(100,200,150). 결과로 HEX와 HSL이 떨어진다. 양방향 변환이 같은 도구에서 처리.
STEP 6: 색감 조정
HSL 값을 살짝 조정해 비슷한 색을 만들어 본다. 색상(H)을 그대로 두고 명도(L)만 70%에서 50%로 낮추면 같은 계열 어두운 색이 나온다.
STEP 7: 실제 작업에 적용
본인 디자인 작업이나 문서 작업에 한 번 적용. 한 색을 정해 두 표기로 정리해 두면 다음 작업에 일관 적용 가능.
한 번 익혀 두면 평생 쓰는 도구
표기법 한 번 익히면 다음부터는 같은 흐름으로 손이 움직인다. 컬러 변환기를 즐겨찾기에 두면 매번 검색 없이 한 클릭 진입.
마무리
처음 한 번이 가장 어렵다. 표기법 차이만 익혀 두면 다음부터는 손에 익는다.