컬러 제대로 사용하기

외국회사에서 UX UI 디자인을 합니다.

1. 색 공간 이해하기

(1)CMYK

시안, 마젠타, 옐로우, 블랙 4가지 색으로 구현하는 색 공간으로 '인쇄'환경에서 사용합니다. 

(2)RGB 

레드, 그린, 블루 빛의 3 원색으로 구현하는 색 공간으로 '디지털'환경에서 사용합니다.

(3)HSL 

Hue(컬러), Saturation(채도), Lightness(명도)로 표현하는 색 공간입니다. 

(4)sRGB 

디지털 환경에서는 어떤 웹 브라우저, 어떤 기기인지 등 다양한 요인에 따라 같은 색상도 다르게 보일 수 있는데요. 그 시각적 오차(?)를 줄여주는 역할을 할 수 있는 것이 sRGB입니다. 표준적으로 사용하는 RGB 색 공간이거든요. 컬러가 제한되나 서로 다른 장치에서 발생할 수 있는 색 차이를 최소화할 수 있지요. 

2. 컬러표기법 이해하기

(1)HEX코드

#000000, #f1f1f1 

(2)RGB 

rgb(255,87,51) *rgb값은 0~255로 표현이 가능합니다.

(3)HSL 

hsl(11,80%,60%) *hue는 0~360까지 표현이 가능합니다. 120 green, 240 blue, 360 red)

(4)RGBA/ HSLA 

rgb(255,87,51,0.1) 여기서 알파값(a)은 투명도를 의미해요. *10% = 0.1

3. 유용한 도구

(1)https://cssgradient.io/ 

CSS Gradient — Generator, Maker, and Background

그라데이션 컬러를 CSS 코드로 전환해 주는 사이트입니다. 그라데이션 컬러를 핸드오버할 때 유용하겠죠?

(2)https://app.contrast-finder.org/?lang=ko

Contrast Finder, 웹 접근성 기준(WCAG)에 적합하도록 명암이 충분히 대비되는 색의 조합 검색

WCAG에 따른 명암비를 체크할 때 유용한 사이트입니다.

(3)https://htmlcolorcodes.com/

HTML Color Codes

한 컬러를 다양한 컬러표기법으로 추출할 수 있어요.

(4)foundation color generator (피그마 플러그인)

default, hover, active 등 상태에 따른 유사색 리스트를 뽑아주고, 웹접근성을 고려하여 컬러를 뽑아줘요(명암비).