a site for beginner front-end web developers
Colors
All about colors
Warm Colors
.warm-color1 {
background-color: hsla(8, 100%, 50%, 1);
}
.warm-color2 {
background-color: hsla(15, 100%, 50%, 1);
}
.warm-color3 {
background-color: hsla(30, 100%, 50%, 1);
}
.warm-color4 {
background-color: hsla(45, 100%, 50%, 1);
}
.warm-color5 {
background-color: hsla(60, 100%, 50%, 1);
}
Cool Colors
.cool-color1 {
background-color: hsla(280, 100%, 50%, 1);
}
.cool-color2 {
background-color: hsla(260, 100%, 50%, 1);
}
.cool-color3 {
background-color: hsla(240, 100%, 50%, 1);
}
.cool-color4 {
background-color: hsla(190, 100%, 50%, 1);
}
.cool-color5 {
background-color: hsla(160, 100%, 50%, 1);
}
Tints and Shades
You can also increase and decrease the lightness of a color, resulting in tints and shades of a hue, respectively.
Tints occur when white is applied to a color, adding or increasing the lightness of a hue.
Shades are created when black is added to a color, which decreases the lightness of a hue.
.tintshade-color1 {
background-color: hsla(240, 100%, 30%, 1);
}
.tintshade-color2 {
background-color: hsla(240, 100%, 45%, 1);
}
.tintshade-color3 {
background-color: hsla(240, 100%, 55%, 1);
}
.tintshade-color4 {
background-color: hsla(240, 100%, 65%, 1);
}
.tintshade-color5 {
background-color: hsla(240, 100%, 75%, 1);
}
Color Psychology
Best Practices
Use neon colors sparingly. While the use of neon colors can feel hip, they are often hard on a user’s eyes.
Avoid vibrating colors. Vibrating colors result from pairing two colors with high saturation together that may be complementary to one another. It creates a glowing or moving effect, which also can be hard on one’s eyes. Tip: Use backdrops to separate vibrating colors.
Avoid color combinations with insufficient contrast, including:
- Bright colors on top of bright colors
- Light colors on top of light colors
- Dark colors on top of dark colors
The different ways to add colors in CSS and their types
Names
RGB values (RGBA for adding transparency)
hexadecimal values
HSL values (HSLA for adding transparency)
Light Up
Light Down
Name
Maroon
Red
RGB
hexadecimal
HSL
rgb(255, 0, 0)
#ff0000
hsl(0, 100%, 50%)
Light Up
Light Down
Name
Orange
RGB
hexadecimal
HSL
rgb(255, 166, 0)
#ffa600
hsl(39, 100%, 50%)
Light Up
Light Down
Name
Brown
RGB
hexadecimal
HSL
rgb(165, 42, 42)
#a62b2b
hsl(0, 59%, 41%)
Light Up
Light Down
Name
Yellow
RGB
hexadecimal
HSL
rgb(255, 255, 0)
#ffff00
hsl(60, 100%, 50%)
Light Up
Light Down
Name
Green
RGB
hexadecimal
HSL
rgb(0, 128, 0)
#008000
hsl(120, 100%, 25%)
Light Up
Light Down
Name
Navy
Blue
RGB
hexadecimal
HSL
rgb(0, 0, 255)
#0000ff
hsl(240, 100%, 50%)
Light Up
Light Down
Name
Purple
RGB
hexadecimal
HSL
rgb(128, 0, 128)
#800080
hsl(300, 100%, 25%)
Light Up
Light Down
Name
Pink
RGB
hexadecimal
HSL
rgb(255, 194, 204)
#ffc2cc
hsl(350, 100%, 88%)
Light Up
Light Down
Name
Grey
RGB
hexadecimal
HSL
rgb(128, 128, 128)
#808080
hsl(0, 0%, 50%)
White
rgb(255, 255, 255)
#ffffff
hsl(0, 0%, 100%)
Black
rgb(0, 0, 0)
#000000
hsl(0, 0%, 0%)
Popular Named Colors
Light (almost transparent)
White
Ivory
LightYellow
OldLace
FloralWhite
SeaShell
MintCream
HoneyDew
Snow
AliceBlue
Azure
WhiteSmoke
Neutral / Skin
Linen
Cornsilk
LemonChiffon
LightGoldenRodYellow
Beige
PapayaWhip
AntiqueWhite
BlanchedAlmond
Bisque
Moccasin
NavajoWhite
PeachPuff
Wheat
Burlywood
Peru
Sienna
SaddleBrown
SandyBrown
Coral
DarkSalmon
LightSalmon
Salmon
LightCoral
IndianRed
MistyRose
LightPink
RosyBrown
Tan
DarkGoldenRod
DarkKhaki
Khaki
PaleGoldenRod
Cool Colors
Pink
PaleVioletRed
Thistle
Orchid
MediumOrchid
Plum
Lavender
LavenderBlush
MediumPurple
SlateBlue
MediumSlateBlue
LightBlue
LightCyan
LightSteelBlue
PowderBlue
LightSkyBlue
SkyBlue
CornflowerBlue
SteelBlue
CadetBlue
DarkCyan
PaleTurquoise
MediumTurquoise
LightGreen
LightSeaGreen
SeaGreen
MediumSeaGreen
DarkSeaGreen
PaleGreen
MediumAquamarine
Teal
Olive
OliveDrab
ForestGreen
Khaki
LightSlateGray
SlateGray
Silver
Dark
Maroon
DarkRed
Brown
FireBrick
Indigo
DarkMagenta
RebeccaPurple
Purple
Black
MediumBlue
MidnightBlue
Navy
DarkSlateBlue
DarkSlateGray
DarkBlue
DarkGreen
DarkOliveGreen
Green
Bright Colors
Yellow
Gold
GoldenRod
Orange
Tomato
Chocolate
OrangeRed
DarkOrange
Red
Crimson
Magenta
DeepPink
HotPink
Fuchsia
Violet
MediumVioletRed
DarkViolet
DarkOrchid
BlueViolet
Blue
DeepSkyBlue
DodgerBlue
RoyalBlue
DarkTurquoise
Turquoise
Cyan
Aqua
Aquamarine
LawnGreen
MediumSpringGreen
SpringGreen
Chartreuse
LimeGreen
Lime
GreenYellow
Greyscale
hsl(0, 0%, 100%)
hsl(0, 0%, 95%)
hsl(0, 0%, 90%)
hsl(0, 0%, 85%)
hsl(0, 0%, 80%)
hsl(0, 0%, 75%)
hsl(0, 0%, 70%)
hsl(0, 0%, 65%)
hsl(0, 0%, 60%)
hsl(0, 0%, 55%)
Gray
hsl(0, 0%, 45%)
hsl(0, 0%, 40%)
hsl(0, 0%, 35%)
hsl(0, 0%, 30%)
hsl(0, 0%, 25%)
hsl(0, 0%, 20%)
hsl(0, 0%, 15%)
hsl(0, 0%, 10%)
hsl(0, 0%, 5%)
hsl(0, 0%, 0%)
Monochromatic
Triadic
Analogous
Complementary
Square
Color Schemes
Monochromatic
Red
Maroon
#ff4d4d
#802626
#cc0000
Orange
#805300
#ffc14d
#806026
#cc8500
SaddleBrown
#d96c1e
#9f6b46
#d9925f
#592c0c
Yellow
Olive
#ffff4d
#808026
#cccc00
Lime
Green
#4dff4d
#268026
#00cc00
Blue
Navy
#4d4dff
#262680
#0000cc
Purple
#cc00cc
#952d95
#cc3dcc
#4d004d
Pink
#806065
#ff738a
#803945
#cc99a2
AliceBlue
#787C80
#A3D4FF
#526A80
#C0C6CC
Triadic
Red
#b31212
#fffc19
#19a6FF
#097163
Orange
#637a12
#19ff85
#ab19ff
#7509b3
SaddleBrown
#401c03
#278c22
#19068c
#0c0640
Yellow
#b3b312
#199eff
#ff1e19
#b30c09
Lime
#12B312
#4319FF
#FF7E19
#B35309
Blue
#1212B3
#FF6819
#4FFF19
#30B309
Purple
#330533
#80670D
#0D806E
#03332C
Pink
#B3747E
#FFFDD9
#A6E4FF
#7DA3B3
AliceBlue
#96A5B3
#FFD8D6
#FDFFD6
#B1B39F
Analogous
Red
#FF530D
#E82C0C
#E80C7A
#FF0DFF
Orange
#FFDB0D
#E8B10C
#E8810C
#FF6B0D
SaddleBrown
#996B0E
#A3620F
#A3370F
#991F0E
Yellow
#56FF0D
#9BE80C
#E8D20C
#FFCE0D
Lime
#0DFF96
#0CE84A
#59E80C
#B6FF0D
Blue
#910DFF
#480CE8
#0C46E8
#0D8CFF
Purple
#8C0707
#96084F
#6F0896
#44078C
Pink
#FFC5B3
#E8A9A2
#E8A2D1
#F8B3FF
AliceBlue
#E3E3FF
#CFD5E8
#CFE3E8
#E3FFFD
Complementary
Red
#B30000
#FF1919
#00B333
#00FF48
Orange
#B37400
#FFAF19
#004FB3
#0070FF
SaddleBrown
#401D04
#D97934
#003A40
#14828C
Yellow
#B3B300
#FFFF19
#5800B3
#7D00FF
Lime
#00B300
#19FF19
#B30059
#FF0080
Blue
#0000B3
#1919FF
#B39200
#FFD100
Purple
#330033
#CC14CC
#123300
#2C8000
Pink
#B3747E
#FFD9DF
#62B371
#BFFFCB
AliceBlue
#96A5B3
#FFFFFF
#B3A184
#FFF9F0
Square
Red
#FF1919
#FFCE19
#19FF5A
#0D22FF
Orange
#FFAF19
#35FF19
#197EFF
#FF0DAF
SaddleBrown
#8C3E06
#718C22
#06818C
#640D8C
Yellow
#FFFF19
#19FFE5
#8A19FF
#FF580D
Lime
#19FF19
#196AFF
#FF198C
#FFB20D
Blue
#1919FF
#FF2519
#FFD519
#0DFF68
Purple
#800D80
#80500D
#35800D
#065180
Pink
#FFA6B5
#FFF5D9
#A6FFB7
#B3C0FF
AliceBlue
#D6ECFF
#FFD6F9
#FFEFD6
#EAFFE3