A guide to color in UX / UI design

Tips, theory and proven techniques from moonlearning.io - for beginners and professionals alike .





 β€” UI-. .  β€” , . .





. ,

-. , , β€” Pantone, CMYK, HEX RGB. HEX RGB, , -, - .





Pantone β†’

Pantone palettes.  Source: https://www.pantone.com/
Pantone. : https://www.pantone.com/

 β€” . Pantone , Pantone . Pantone. Pantone  β€” , ( CMYK).





CMYK β†’

CMYK
CMYK

: (cyan), (magenta), (yellow) (key β€” ) β€” . .





RGB β†’ UI-

RGB
RGB

RGB β€” (R), (G) (B) , . , (). . 100%. ,  β€” .





RGB- UI- 0 255, : R = 255, G = 255, B = 255 ( RGB = 255, 255, 255) β€” , RGB = 0, 0, 0 β€” .





RGBA β†’ UI-

RGB, - β€” A, 0,0 ( ) 1,0 ( ).





, , RGBA = 255, 255, 255, 0,5 β€” 50%.





HEX β†’ UI- ​

! RGB β€” , , HEX β€” , RBG-. HEX- , , .





: R,  β€” G,  β€” B ( RGB HEX ).





. , : ,  β€” .  β€” .





«» . .





-, Pantone, Pantone. Pantone.





Pantone's Color Finder Tool
Pantone

HEX, RGB CMYK β€” Pantone. , . Pantone HEX, Β«Pantone to PantoneΒ» ( , ).





​ . , Pantone,  β€” .





UI-?

The concept of "three colors" is also used in interior design
Β« Β»

UI- , -.





(  β€” ). , , .





, , , β€” : .





, UI-

 β€” . , .





RGB color wheel
RGB

( β€” ,  β€” ) , . , .





RGB- 12  ( , ).  β€” . Adobe , .





Solid colors

,  β€” . .





Colors close in shade

, , β€” . , 90Β°. .





Complementary colors

-  β€” . ,  β€” . , .





Separate complementary colors

 β€” : Β« Β».





,  β€” , , β€” .





,  β€” , . , , β€” , .





Tint, lighten, shade and tone
, ,

(hue) β†’ , . , .





(tint) β†’ .





(shade) β†’ .





(tone) β†’ .





, .  β€” , Β« Β».





https://material.io/design/color/the-color-system
https://material.io/design/color/the-color-system

​. Β«PΒ» , . Β«PΒ» , ,  β€” .





HEX-,  β€” , . - ,  β€” .  β€” .  β€” , .





Color variations

,  β€” () -.





(, ) β€” - , .





Color naming

, , β€” , , , ,  . . . ( ).





 β€” , . Β« Β» 100 β€” . 10.





Naming variations

500, .





(1, 2, 3, 4  . .): , . .





Color style sheet with system colors

​ , ,  β€” , , . , , β€” , !





(on-color) β€” , , (, ). :





Adding foreground color
  1.  β€” - (, ), . , , WCAG.





Checking the availability of color contrast

2. ,  β€” -, .  β€” , , -,  β€” , . , , .





!

 β€” .





Color Style Sheet for Figma

Β«60-30-10Β»

Color distribution

, , , , Β«60-30-10Β»: 60% ,  β€” 30%,  β€” 10%, (, ).





 β€” 60%,  β€” 30% 10% β€” .





, Β« Β» . , .  β€” .





Rule "60-30-10"
Β«60-30-10Β»

, .





!

, moonlearning.io β€” UX/UI- .






Alconost.





Alconost , 70 . - , , API, , 24/7, .





β€” , , , , , , , Google Play App Store.








All Articles