Design for Developer - Color

A B O U T C O L O RD E S I G N F O R D E V E L O P E R

C O L O R C O M M O N S E N S E

I N T R O

C O L O R C O M M O N S E N S EI N T R O


?


RGB (255,0,0)

RGB (0,255,0)

RGB (0,0,255)

RGB (255,255,0)

RGB (0,255,255)

RGB (255,0,255)


RGB (90,200,100)=?

H S BC O L O R S Y S T E M

• 1970년경 HSB가 개발 됨

• Hue(색상), Saturation(채도), Brightness(밝기)

• Hue는 각도 체계, Saturation, Brightness는 % 체계

• 따라서 8bit 상의 RGB와 1대1 매칭되진 않음



Hue

Saturation

Brightness

H S B - H U EC O L O R S Y S T E M

H S B - S AT U R AT I O NC O L O R S Y S T E M

H S B - B R I G H T N E S SC O L O R S Y S T E M

• 대부분의 디자이너는 채도와 명도를 기준으로 사고함

• 개발자는 채도와 명도를 눈으로 보고 바로 알아채진 않아도 됨(컬러피커가 다 숫자로 보여줌)

• 하지만 디자이너와 의사소통을 하기 위해서, 나아가 스스로 디자인을 하기 위해선 기본 개념은 알고 있으면 좋음



※실제로 들은 말

“약간 더 탁하게 해주시고, 선명하게 만들어주세요.”


채도를 낮춰 주시고요, 이미지를 더 또렷하게 만들어주세요.

※올바른 표현

R G B C U B E H S B C Y L I N D E R

C O L O R C O N V E R S I O N

R G B C U B EC O L O R C O N V E R S I O N

R G B C U B E - H U EC O L O R C O N V E R S I O N

R G B C U B E - S AT U R AT I O NC O L O R C O N V E R S I O N

R G B C U B E - B R I G H T N E S SC O L O R C O N V E R S I O N

R G B C U B E →H S B C Y L I N D E R




RGB Cube 돌린다 강제 변형!!

R G B C U B EC O L O R C O N V E R S I O N

H S V C Y L I N D E RC O L O R C O N V E R S I O N



1차 혼란 Brightness에 대한 오해



B

W

R

√2

1 B

W Y

√2

1



• 같은 밝기의 두 색을 구하는 법

• RGB(a,b,c) RGB(d,e,f) 두 색이 있을 때,

• a+b+c=d+e+f 라면 두 색은 같은 밝기다.



2차 혼란 색간 밀도 왜곡

C O L O R S C H E M E G E N E R AT O R

U S E F U L S I T E

C O L O R S C H E M E G E N E R AT O RU S E F U L S I T E

• Kuler

• paletton.com

• colourlovers

• colorotate

• colourcode

C O L O R S C H E M E G E N E R AT O R - K U L E R

U S E F U L S I T E

C O L O R S C H E M E G E N E R AT O R - PA L E T T O N . C O M

U S E F U L S I T E

http://paletton.com

C O L O R S C H E M E G E N E R AT O R - C O L O U R L O V E R S

U S E F U L S I T E

C O L O R S C H E M E G E N E R AT O R - C O L O R O TAT E

U S E F U L S I T E

C O L O R S C H E M E G E N E R AT O R - C O L O R C O D E

U S E F U L S I T E

C O L O R S C H E M EH O W T O C H O O S E

M A I N C O L O RC O L O R S C H E M E

• 우리가 빨, 주, 노, 초, 파, 남, 보 등으로 부르는 일반적인 색이름은 마치 이 색들간의 균형이 일정한 것 같지만 실제로는 그렇지 않음.

• Hue 값 뿐만 아니라 Saturation, Brightness 등의 영향을 많이 받음.

• 그 예를 가장 잘 보여주는게 노란색


HSB(50,100,85)HSB(45,100,100)


HSB(0,90,70)HSB(0,100,100)


HSB(0,90,70)HSB(120,100,100)


H U E S AT U R AT I O N B R I G H T N E S S

빨강색 340 - 10 75 - 100 60 - 90주황색 10 - 35 70 - 90 75 - 90노랑색 35 - 60 60 - 100 95 - 100연두색 60 - 90 50 - 80 65 - 85초록색 90 - 150 60 - 90 50 - 70청록색 150 - 180 70 - 80 70 - 90하늘색 180 - 200 60 - 100 85 - 100파랑색 200 - 250 60 - 80 70 - 90남색 200 - 250 20 - 60 30 - 60보라색 250 -300 50 - 85 70 -90분홍색 300-340 20 - 50 95 - 100

S E C O N D C O L O RC O L O R S C H E M E

• 딱 한개의 컬러만 고르는건 사실 어렵지 않음.

• 그 색과 조화로운 두번째, 세번째 컬러를 고르는 것부터 허들의 시작

• 독특하고 새로운 컬러링을 추구하는게 아니라면 안전한 컬러를 뽑는 조건들이 있음.


• 비슷한 Hue, 비슷한 Saturation, 비슷한 Brightness를 가지면 조화로움

• Saturation과 Brightness는 반비례관계를 유지하는게 안정적

• Hue값이 많이 차이나는 경우에는 Saturation이 낮은게 조화로움.


HSB(180,100,100)HSB(0,100,100)

RGB(0, 255, 255)RGB(255, 0, 0)


HSB(180,60,100)HSB(0,60,100)

RGB(102, 255, 255)RGB(255, 102, 102)

R+G+B=621R+G+B=459


HSB(180,60,98)HSB(0,33,100)

RGB(100, 250, 250)RGB(255, 172, 172)

R+G+B=600R+G+B=599


HSB(160,70,80)HSB(100,70,60)

RGB(16, 204, 156)RGB(82, 153, 46)

R+G+B=376R+G+B=281


HSB(160,70,53)HSB(100,70,60)

RGB(41, 135, 104)RGB(82, 153, 46)

R+G+B=280R+G+B=281

T H I R D C O L O RC O L O R S C H E M E

HSB(160,70,53)HSB(100,70,60)

RGB(41, 135, 104)RGB(82, 153, 46)

R+G+B=280R+G+B=281

HSB(240,100,100)

RGB(3, 3, 255)

R+G+B=261


HSB(160,70,53)HSB(100,70,60)

RGB(41, 135, 104)RGB(82, 153, 46)

R+G+B=280R+G+B=281

HSB(240,70,100)

RGB(76, 76, 255)

R+G+B=401


HSB(160,70,53)HSB(100,70,60)

RGB(41, 135, 104)RGB(82, 153, 46)

R+G+B=280R+G+B=281

HSB(240,70,69)

RGB(53, 53, 176)

R+G+B=282


HSB(0,100,100)HSB(40,100,100)

RGB(255, 0, 0)RGB(255, 170, 0)

R+G+B=255R+G+B=425


HSB(0, 67, 100)HSB(40,100,100)

RGB(255, 85, 85)RGB(255, 170, 0)

R+G+B=425R+G+B=425


HSB(0, 67, 100)HSB(40,100,100)

RGB(255, 85, 85)RGB(255, 170, 0)

R+G+B=425R+G+B=425

HSB(210, 100, 100)

RGB(0, 125, 255)

R+G+B=380


HSB(0, 67, 100)HSB(40,100,100)

RGB(255, 85, 85)RGB(255, 170, 0)

R+G+B=425R+G+B=425

HSB(210, 89, 100)

RGB(28, 142, 255)

R+G+B=425

U I C O L O R T R E N D

G R AY S C H E M E

G R AY S C H E M EU I C O L O R T R E N D

아직도 #ccc, #eee, #999 쓰니?


이제는 말할 수 있다. 무채색은 모다??


Grayscale → 무채색 = 채도가 없는(0인) 색

G R AY S C H E M E - A P P L EU I C O L O R T R E N D

G R AY S C H E M E - T W I T T E RU I C O L O R T R E N D

G R AY S C H E M E - D R O P B O XU I C O L O R T R E N D

G R AY S C H E M E - FA C E B O O KU I C O L O R T R E N D


• 약간의 Blue 가 가미된 Gray를 Cool Gray라고 한다.

• (그렇다면 약간의 Red가 가미된 Gray는 ?)

• 많은 UI 들이 Grey Scheme에 Cool Gray를 사용한다.

• 무채색이 아닌 Cool Gray를 사용하면 부드러운 인상을 줄 수 있고, 브랜딩을 강화할 수 있다.

H O W T O M A K E

G R AY S C H E M E

G R AY S C H E M EH O W T O M A K E

• 원하는 분위기를 생각한다.

• 채도가 높을수록 가볍고 경쾌한 느낌

• 채도가 낮을 수록 무겁고 진지한 느낌


• 중간톤이 될 적당한 회색을 고른다

• Hue 180~240° 사이

• Saturation 15~40% 사이

• Brightness 30~50% 사이

• Saturation과 Brightness는 반비례 관계


HSB(220, 30,45)


• 가장 밝은 톤이 될 회색을 고른다

• Hue 는 잠시 신경쓰지 않아도 됨

• Saturation 1~6% 사이

• Brightness 96~98% 사이

• 역시 Saturation과 Brightness는 반비례 관계


HSB(220, 3,95)


두 지점을 잇는 직선을 그려줍니다.


• 가장 밝은 곳의 S 값을 기준이라고 생각하고 방정식을 만듭니다.

• S1 B1 (0, 95), S2 B2 (27, 45)

• B= aS+c

• c=95

• 45=27a+95

• a=-50/27

• B=-50/27S + 95


원하는 단계만큼 등분 해줍니다.


• B=-50/27S + 95

• 식을 보시다시피 숫자가 더럽게 정수로 나눠떨어지지 않기 때문에 알아서 반올림/올림/버림을 해줘야 합니다.

• 각 지점의 좌표값을 뽑는 방법에 대한 자세한 설명은 생략한다.


채도가 너무 높다(=파랑기가 많이 돈다)고 생각되면 상수 a의 기울기를 더 급하게 만들어 주면 됩니다.

G R AY S C H E M E + H U E

H O W T O M A K E

G R AY S C H E M E + H U EH O W T O M A K E

S, B + H


180°

240°


• 밝은 톤은 180°에 가깝게, 어두운톤은 240°에 가깝게 설정합니다.

• S, B 를 원하는 색 단계만큼 등분했듯이 H값도 같은 방식으로 등분해줍니다.

• 공식에 대한 자세한 설명은 생략한다.

T H A N K S F O R H E A R I N G !D E S I G N F O R D E V E L O P E R

Design for Developer - Color

Design

Transcript of Design for Developer - Color