개발자를 위한 디자인 - 색상 발표자료

1. DESIGN FOR DEVELOPER
ABOUT COLOR

2. INTRO
COLOR COMMON SENSE

3. INTRO
COLOR COMMON SENSE

4. INTRO
COLOR COMMON SENSE

5. INTRO
COLOR COMMON SENSE

6. INTRO
COLOR COMMON SENSE

7. INTRO
COLOR COMMON SENSE
?

8. INTRO
COLOR COMMON SENSE

9. INTRO
COLOR COMMON SENSE
?

10. INTRO
COLOR COMMON SENSE

11. INTRO
COLOR COMMON SENSE

12. INTRO
COLOR COMMON SENSE

13. INTRO
COLOR COMMON SENSE

14. INTRO
COLOR COMMON SENSE
RGB (255,0,0)
RGB (0,255,0)
RGB (0,0,255)
RGB (255,255,0)
RGB (0,255,255)
RGB (255,0,255)

15. INTRO
COLOR COMMON SENSE

16. INTRO
COLOR COMMON SENSE
RGB (90,200,100)=?

17. COLOR SYSTEM
HSB

18. COLOR SYSTEM
HSB
• 1970년경 HSB가 개발 됨
• Hue(색상), Saturation(채도), Brightness(밝기)
• Hue는 각도 체계, Saturation, Brightness는 % 체계
• 따라서 8bit 상의 RGB와 1대1 매칭되진 않음

19. COLOR SYSTEM
HSB
Hue
Saturation
Brightness

20. COLOR SYSTEM
H S B - HUE

21. COLOR SYSTEM
HSB - S ATURATION

22. COLOR SYSTEM
HSB - BRIGHTNESS

23. COLOR SYSTEM
HSB
• 대부분의 디자이너는 채도와 명도를 기준으로 사고함
• 개발자는 채도와 명도를 눈으로 보고 바로 알아채진 않아도 됨
(컬러피커가 다 숫자로 보여줌)
• 하지만 디자이너와 의사소통을 하기 위해서, 나아가 스스로 디
자인을 하기 위해선 기본 개념은 알고 있으면 좋음

24. COLOR SYSTEM
HSB
“약간 더 탁하게 해주시고, 선명하게 만들어주세요.”
※실 제 로 들 은 말

25. COLOR SYSTEM
HSB
채도를 낮춰 주시고요, 이미지를 더 또렷하게 만들어주세요.
※올 바 른 표 현

26. COLOR CONVERSION
RGB CUBE
HSB CYLINDER

27. COLOR CONVERSION
RGB CUBE

28. COLOR CONVERSION
RGB CUBE - HUE

29. COLOR CONVERSION
RGB CUBE - SATURATION

30. COLOR CONVERSION
RGB CUBE - BRIGHTNESS

31. COLOR CONVERSION
RGB CUBE
→HSB CYLINDER

32. COLOR CONVERSION
RGB CUBE
→HSB CYLINDER
RGB Cube 돌린다 강제 변형!!

33. COLOR CONVERSION
RGB CUBE
→HSB CYLINDER

34. COLOR CONVERSION
RGB CUBE

35. COLOR CONVERSION
HSV CYLINDER

36. COLOR CONVERSION
RGB CUBE
→HSB CYLINDER
1차 혼란 Brightness에 대한 오해

37. COLOR CONVERSION
RGB CUBE
→HSB CYLINDER

38. COLOR CONVERSION
RGB CUBE
→HSB CYLINDER
B
W
R
√2
W Y
1 B
√2
1

39. COLOR CONVERSION
RGB CUBE
→HSB CYLINDER
• 같은 밝기의 두 색을 구하는 법
• RGB(a,b,c) RGB(d,e,f) 두 색이 있을 때,
• a+b+c=d+e+f 라면 두 색은 같은 밝기다.

40. COLOR CONVERSION
RGB CUBE
→HSB CYLINDER
2차 혼란 색간 밀도 왜곡

41. COLOR CONVERSION
RGB CUBE
→HSB CYLINDER

42. COLOR CONVERSION
RGB CUBE
→HSB CYLINDER

43. COLOR CONVERSION
RGB CUBE
→HSB CYLINDER

44. USEFUL SITE
COLOR SCHEME
GENERATOR

45. USEFUL SITE
COLOR SCHEME GENERATOR
• Kuler
• paletton.com
• colourlovers
• colorotate
• colourcode

46. USEFUL SITE
COLOR SCHEME GENERATOR
- KULER

47. USEFUL SITE
COLOR SCHEME GENERATOR
- KULER

48. USEFUL SITE
COLOR SCHEME GENERATOR
- KULER

49. USEFUL SITE
COLOR SCHEME GENERATOR
- PALETTON.COM

50. USEFUL SITE
COLOR SCHEME GENERATOR
- PALETTON.COM

51. USEFUL SITE
COLOR SCHEME GENERATOR
- COLOURLOVERS

52. USEFUL SITE
COLOR SCHEME GENERATOR
- COLOROTATE

53. USEFUL SITE
COLOR SCHEME GENERATOR
- COLORCODE

54. HOW TO CHOOSE
COLOR SCHEME

55. COLOR SCHEME
MAIN COLOR
• 우리가 빨, 주, 노, 초, 파, 남, 보 등으로 부르는 일반적인 색이
름은 마치 이 색들간의 균형이 일정한 것 같지만 실제로는 그렇
지 않음.
• Hue 값 뿐만 아니라 Saturation, Brightness 등의 영향을 많
이 받음.
• 그 예를 가장 잘 보여주는게 노란색

56. COLOR SCHEME
MAIN COLOR
HSB(45,100,100) HSB(50,100,85)

57. COLOR SCHEME
MAIN COLOR
HSB(0,100,100) HSB(0,90,70)

58. COLOR SCHEME
MAIN COLOR
HSB(120,100,100) HSB(0,90,70)

59. COLOR SCHEME
MAIN COLOR
HUE SATURATION BRIGHTNESS
빨 강 색 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

60. COLOR SCHEME
SECOND COLOR
• 딱 한개의 컬러만 고르는건 사실 어렵지 않음.
• 그 색과 조화로운 두번째, 세번째 컬러를 고르는 것부터 허들의
시작
• 독특하고 새로운 컬러링을 추구하는게 아니라면 안전한 컬러를
뽑는 조건들이 있음.

61. COLOR SCHEME
SECOND COLOR
• 비슷한 Hue, 비슷한 Saturation, 비슷한 Brightness를 가지
면 조화로움
• Saturation과 Brightness는 반비례관계를 유지하는게 안정적
• Hue값이 많이 차이나는 경우에는 Saturation이 낮은게 조화
로움.

62. COLOR SCHEME
SECOND COLOR
HSB(0,100,100) HSB(180,100,100)
RGB(255, 0, 0) RGB(0, 255, 255)

63. COLOR SCHEME
SECOND COLOR
HSB(0,60,100) HSB(180,60,100)
RGB(255, 102, 102) RGB(102, 255, 255)
R+G+B=459 R+G+B=621

64. COLOR SCHEME
SECOND COLOR
HSB(0,33,100) HSB(180,60,98)
RGB(255, 172, 172) RGB(100, 250, 250)
R+G+B=599 R+G+B=600

65. COLOR SCHEME
SECOND COLOR
HSB(100,70,60) HSB(160,70,80)
RGB(82, 153, 46) RGB(16, 204, 156)
R+G+B=281 R+G+B=376

66. COLOR SCHEME
SECOND COLOR
HSB(100,70,60) HSB(160,70,53)
RGB(82, 153, 46) RGB(41, 135, 104)
R+G+B=281 R+G+B=280

67. COLOR SCHEME
THIRD COLOR
HSB(100,70,60) HSB(160,70,53)
RGB(82, 153, 46) RGB(41, 135, 104)
R+G+B=281 R+G+B=280
HSB(240,100,100)
RGB(3, 3, 255)
R+G+B=261

68. COLOR SCHEME
THIRD COLOR
HSB(100,70,60) HSB(160,70,53)
RGB(82, 153, 46) RGB(41, 135, 104)
R+G+B=281 R+G+B=280
HSB(240,70,100)
RGB(76, 76, 255)
R+G+B=401

69. COLOR SCHEME
THIRD COLOR
HSB(100,70,60) HSB(160,70,53)
RGB(82, 153, 46) RGB(41, 135, 104)
R+G+B=281 R+G+B=280
HSB(240,70,69)
RGB(53, 53, 176)
R+G+B=282

70. COLOR SCHEME
SECOND COLOR
HSB(40,100,100) HSB(0,100,100)
RGB(255, 170, 0) RGB(255, 0, 0)
R+G+B=425 R+G+B=255

71. COLOR SCHEME
SECOND COLOR
HSB(40,100,100) HSB(0, 67, 100)
RGB(255, 170, 0) RGB(255, 85, 85)
R+G+B=425 R+G+B=425

72. COLOR SCHEME
THIRD COLOR
HSB(40,100,100) HSB(0, 67, 100)
RGB(255, 170, 0) RGB(255, 85, 85)
R+G+B=425 R+G+B=425
HSB(210, 100, 100)
RGB(0, 125, 255)
R+G+B=380

73. COLOR SCHEME
THIRD COLOR
HSB(40,100,100) HSB(0, 67, 100)
RGB(255, 170, 0) RGB(255, 85, 85)
R+G+B=425 R+G+B=425
HSB(210, 89, 100)
RGB(28, 142, 255)
R+G+B=425

74. UI COLOR TREND
GRAY SCHEME

75. UI COLOR TREND
GRAY SCHEME
아직도 #ccc, #eee, #999 쓰니?

76. UI COLOR TREND
GRAY SCHEME
이제는 말할 수 있다. 무채색은 모다??

77. UI COLOR TREND
GRAY SCHEME
Grayscale → 무채색 = 채도가 없는(0인) 색

78. UI COLOR TREND
GRAY SCHEME - APPLE

79. UI COLOR TREND
GRAY SCHEME - TWITTER

80. UI COLOR TREND
GRAY SCHEME - DROPBOX

81. UI COLOR TREND
GRAY SCHEME - FACEBOOK

82. UI COLOR TREND
GRAY SCHEME
• 약간의 Blue 가 가미된 Gray를 Cool Gray라고 한다.
• (그렇다면 약간의 Red가 가미된 Gray는 ?)
• 많은 UI 들이 Grey Scheme에 Cool Gray를 사용한다.
• 무채색이 아닌 Cool Gray를 사용하면 부드러운 인상을 줄 수
있고, 브랜딩을 강화할 수 있다.

83. HOW TO MAKE
GRAY SCHEME

84. HOW TO MAKE
GRAY SCHEME
• 원하는 분위기를 생각한다.
• 채도가 높을수록 가볍고 경쾌한 느낌
• 채도가 낮을 수록 무겁고 진지한 느낌

85. HOW TO MAKE
GRAY SCHEME
• 중간톤이 될 적당한 회색을 고른다
• Hue 180~240° 사이
• Saturation 15~40% 사이
• Brightness 30~50% 사이
• Saturation과 Brightness는 반비례 관계

86. HOW TO MAKE
GRAY SCHEME
HSB(220, 30,45)

87. HOW TO MAKE
GRAY SCHEME
• 가장 밝은 톤이 될 회색을 고른다
• Hue 는 잠시 신경쓰지 않아도 됨
• Saturation 1~6% 사이
• Brightness 96~98% 사이
• 역시 Saturation과 Brightness는 반비례 관계

88. HOW TO MAKE
GRAY SCHEME
HSB(220, 3,95)

89. HOW TO MAKE
GRAY SCHEME
두 지점을 잇는 직선을 그려줍니다.

90. HOW TO MAKE
GRAY SCHEME
• 가장 밝은 곳의 S 값을 기준이라고 생각하고 방정식을 만듭니다.
• S1 B1 (0, 95), S2 B2 (27, 45)
• B= aS+c
• c=95
• 45=27a+95
• a=-50/27
• B=-50/27S + 95

91. HOW TO MAKE
GRAY SCHEME
원하는 단계만큼 등분 해줍니다.

92. HOW TO MAKE
GRAY SCHEME
• B=-50/27S + 95
• 식을 보시다시피 숫자가 더럽게 정수로 나눠떨어지지 않기 때
문에 알아서 반올림/올림/버림을 해줘야 합니다.
• 각 지점의 좌표값을 뽑는 방법에 대한 자세한 설명은 생략한다.

93. HOW TO MAKE
GRAY SCHEME

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

95. HOW TO MAKE
GRAY SCHEME + HUE

96. HOW TO MAKE
GRAY SCHEME + HUE
S, B + H

97. HOW TO MAKE
GRAY SCHEME + HUE
180°
240°

98. HOW TO MAKE
GRAY SCHEME + HUE
• 밝은 톤은 180°에 가깝게, 어두운톤은 240°에 가깝게 설정합니
다.
• S, B 를 원하는 색 단계만큼 등분했듯이 H값도 같은 방식으로
등분해줍니다.
• 공식에 대한 자세한 설명은 생략한다.

99. HOW TO MAKE
GRAY SCHEME + HUE

100. DESIGN FOR DEVELOPER
THANKS FOR HEARING!