E2(+*%+*.22 \(/*&/.

@/()

!"#$%&'()*%+ ,-*!$.+(/

^'%&*%&*P5"@*.+'%*Q@((*?(?#(@[5+$P*&/5@P*/'%&
?5+/'N
B%M+*"2*Q5@*I()%"?*.+)*M(/*.+*(R/@.*5+(

0%1.$2*3."&'%1 45$$56

7"$*89*:;:< = >*?%+*@(.) = =
A%&/(+

B.C(

DEAEF*BDGHIH*J

!"#$%"$&'($%)*+,*-$-".")
'-/(0($*1$,('*213
K+*(L"%$./(@.$*/@%.+M$(N

A triadic color scheme, a unique variant of

the split complementary color scheme,
with an equal distance between all colors.
All three colors are distributed evenly
around the color wheel, causing there to
be no clear superiority of one color.

The scheme is always vibrant and colorful,

designers should use it and balance very
carefully to maintain the desired effects
and color meaning.

Triadic color harmonies tend to be quite

enthusiastic, even if you use pale or
unsaturated versions of your hues.

To use a triadic harmony successfully, the

colors should be carefully balanced — let
one color dominate and use the two others
for accent.

?5C%+MNO5?

By combining colors using the triadic

principle we get lively and cheerful space
which is the most suitable for playful or
colorful user interfaces.

Triadic scheme of warm colors is very

intense and can cause the feeling of
discomfort in the UI if you color the equal
amount of space with each color.

Vibrancy and intensity can be reassured

by using one color as the dominant, and
the other two as the secondary and the
accent ones.

4+'5$#+5$%"$-)(+%($%)*+,*-$-".")$'-/(0(6

7%(8$96$:*-;$+15$-".")
I started with color “#F7C88C”. And we’re
going to change it to HSB, which stands for
Hue, Saturation, and Brightness.

7%(8$<6$=+;($-"85
Just copy paste the same color 2 more
times so we can make a perfect triadic
color scheme.

7%(8$>6$?/+12($!&($@+.&(
Increase or decrease the hue (H in HSB)
value by 150 points. The color code in HSB
is “34 43 97”.

First decrease by 120 points, you will get

first equivalent color and then other
increase by 120 points, you will get second
equivalent color.

H=34

H=-120 H=+120

H=274 H=154

7%(8$A6$7/+,('$B$%"1(
You can also change S & B (Saturation and
Brightness) values accordingly to get
better contrast and accessibility.

The color which I picked is very bright. So,

I am decreasing B value of other colors to
make perfect pair.

7%(8$C6$D88.5
Now, directly apply to your designs.

D1"%/()$4E+08.(
Let’s look at another example by the same
approach. I have picked the “#2F2D52”
color. Follow all the steps and make my
color palette.

After applying my color palette.

Understanding the relationships between

colors can help you not only in your
designs, but can give you an appreciation
of the designs of others.

Monochromatic

!"#$%"$+88.5
0"1"-/)"0+%*-$-".F
'-/(0($*1$,('*213
I.+P*&'.)(&*5Q*5+(
O5$5@N
"R2$.+(/N5@M

Analogous

!"#$%"$&'(
+1+."2"&'$-".")F
'-/(0($*1$,('*213
K)S.O(+/*/5*(.O'
5/'(@N
"R2$.+(/N5@M

Complementary

!"#$%"$&'($+
-"08.(0(1%+)5$-".F
'-/(0($*1$,('*213
E225&%/(*/5*(.O'
5/'(@N
"R2$.+(/N5@M

Split Complementary

!"#$%"$&'($+$'8.*%
-"08.(0(1%+)5$-".F
'-/(0($*1$,('*213
K*+.@@56*/@%.+M$(N
"R2$.+(/N5@M

Tetradic

!"#$%"$&'($+$%(%)+,*-
-".")$'-/(0($*1F
,('*213
K*@(O/.+M$(*5Q*O5$5@&
T)5"#$(U
O5?2$(?(+/.@PVN
"R2$.+(/N5@M

W> X

W> X

!"#$%&'()&*)+,-&.)/+*,&'()&/*0')*1Y(/.
Z5"@*/%2*6%$$*M5*/5*0%1.$2*3."&'%1*/'@5"M'*.*/'%@)[2.@/P
2$./Q5@?*5Q*/'(%@*O'5%O(9*$(//%+M*/'(?*1+56*P5"*.22@(O%./(
/'(%@*&/5@PN

\%C(*.*/%2

203"&45&6$*&7)803"&")/8
YP*,-*!$.+(/

\(/*/'(*$./(&/*+(6&*Q@5?*/'(*65@$)*5Q*,-*)(&%M+*]^.1(*.
$551N

YP*&%M+%+M*"29*P5"*6%$$*O@(./(*.*I()%"?*.OO5"+/*%Q*P5"*)5+_/*.$@(.)P
'.C(*5+(N*F(C%(6*5"@*!@%C.OP*!5$%OP*Q5@*?5@(*%+Q5@?./%5+*.#5"/*5"@
2@%C.OP*2@.O/%O(&N

\(/*/'%&*+(6&$(//(@

9$*)&6*$:&;<&=>+")' 45$$56

,-*!$.+(/*%&*.*5+([&/52*@(&5"@O(*Q5@*(C(@P/'%+M*@($./()
/5*"&(@*(R2(@%(+O(N

`%&'(/.*\"2/. = 7"$*89*:;:<

["&)1(5$+1,$8*%J+..'$,&)*12$05
%)+1'*%*"1$%"$S\$L('*21

,-*b(&%M+ 8*?%+*@(.)

B'.@(*P5"@*%)(.&*6%/'*?%$$%5+&*5Q*@(.)(@&N

a@%/(*5+*I()%"?

I.@%.+.*0.@M.& = 7"$*J9*:;:<

U&%&)+6$K/($U"1%$K/+%$4'-+8(,$%/(
]+^*'$%"$R+1,$"1$%/($=""1

K@/ 8*?%+*@(.)

b%.+.*Aó2(c = 7"$*J9*:;:<

I/+%$*'$%/($K('.+$_L"2$0",(`3

^(&$. :*?%+*@(.)

7(QQ@(P*A(( = 7"$*J9*:;:<

U*20+$'%(8$H5$'%(8$%&%")*+.$8+)%$9$–
N&*.,*12$+$R"2*1a7*21$S8$7-)((1

,d f*?%+*@(.)

"R2$.+(/N5@M = 7"$*J9*:;:<

7"J%#+)($%('%*12$.*J($-5-.($2&*,(6
'%(8bH5b'%(8$%"$+$8()J(-%$S\

,- >*?%+*@(.)

F(.)*?5@(*Q@5?*,-*!$.+(/

.)?$::)",),&6*$:&9),04:

4.@'.)*I.$(M.?

C$G(.*+H.($I*)(J)+0($K"".'$J")$I(H
L('*21()'

B(@M(%*3N %+ Y55/O.?2

M$N('%$8)+-%*-('$J")$#)*%*12
+--(''*H.($%(E%

F%/(&'5&/.

=+1+2($O"&)$D88$7%")($G(@*(#'
D1,$G+%*12'$I*%/$K/('($K"8$K*8'

7./%*`"M@5'5

?+'($7%&,5P6$=(1%")$"1$L(0+1,

3./*G.@@%&

L('*21$L(2)(($:)"Q(-%$:)"8"'+.

0%1.$2*3."&'%1 %+ ,-*!$.+(/

R(+)1$ST$L('*21$U")$U)((

B2"@d^

M$N('%$V1.*1($:/"%"$4,*%")$7"J%#+)(
+1,$D88'$WU)(($+1,$:+*,X

e".$.@55

U((,H+-;$!+'$+$7/(.J$R*J($Y$=+;(
7&)($%"$D-%*@+%(Z

K#5"/ G($2 ^(@?& !@%C.OP

@)'&'()&9),04:&+55