UI Color System

A general light and dark mode color system for websites and applications
Color Tools
Coolors
UI Colors
Hihayk

Basics

Pure

#FFFFFF
#000000

Background

#f2f6ff
#00081A

Outlines

light
dark

Light Mode

Text Samples

BRIGHT

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

DIM

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Brand Color

100
#dae7ff
200
#bdd6ff
300
#90bdff
400
#5b98ff
500 (main)
#3673fc
600
#1f52f1
700
#173dde
800
#1933b4
900
#1b308d

UI Colors

100
#ffbfc1
200
#ff8f99
300
#ff6078
400
#ff325c
500 (main)
#ed1d46
600
#e60331
700
#cc001f
800
#b30010
900
#990004
100
#d9ffe6
200
#b5fdce
300
#7bfaa9
400
#3bed7c
500 (main)
#13ec63
600
#00df50
700
#00bf40
800
#009f31
900
#008023
100
#ffffbf
200
#ffff8f
300
#ffff62
400
#fffa47
500 (main)
#3673fc
600
#e6e019
700
#cccc02
800
#b3b300
900
#999900

Dark Greyscale

100 (background)
#00081a
200
#10172a
300
#20263a
400
#303549
500
#404458
600
#505367
700
#606276
800
#707285
900
#808193

Light Greyscale

100 (background)
#f2f6ff
200
#ebf0f9
300
#e4e9f2
400
#dee3ec
500
#d7dce6
600
#d0d6df
700
#cad0d9
800
#c3c9d2
900
#bcc3cc

Dark Mode

Text Samples

BRIGHT

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

DIM

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Brand Color

100
#dae7ff
200
#bdd6ff
300
#90bdff
400
#5b98ff
500 (main)
#3673fc
600
#1f52f1
700
#173dde
800
#1933b4
900
#1b308d

UI Colors

100
#dae7ff
200
#bdd6ff
300
#90bdff
400
#5b98ff
500 (main)
#3673fc
600
#1f52f1
700
#173dde
800
#1933b4
900
#1b308d
100
#dae7ff
200
#bdd6ff
300
#90bdff
400
#5b98ff
500 (main)
#3673fc
600
#1f52f1
700
#173dde
800
#1933b4
900
#1b308d
100
#dae7ff
200
#bdd6ff
300
#90bdff
400
#5b98ff
500 (main)
#3673fc
600
#1f52f1
700
#173dde
800
#1933b4
900
#1b308d

Dark Greyscale

100 (background)
#00081a
200
#10172a
300
#20263a
400
#303549
500
#404458
600
#505367
700
#606276
800
#707285
900
#808193

Light Greyscale

100 (background)
#f2f6ff
200
#ebf0f9
300
#e4e9f2
400
#dee3ec
500
#d7dce6
600
#d0d6df
700
#cad0d9
800
#c3c9d2
900
#bcc3cc