colorsandfonts

Share on Twitter
Color System Color Palettes Color Gradients Font Pairings Glyphs V 1.0 talwind figma figma sketch

Color System

14 Color Shades
CSS Code

Palette

Blue Gray.-
#BBC9D0 50
#B1C1C9 100
#A6B9C2 150
#9CB0BA 200
#87A0AC 300
#718F9D 400
#607D8B 500
#4F6773 600
#3F525B 700
#36474F 750
#2E3C43 800
#263137 850

Palette

Red.-
#FFC0AC 50
#FFB097 100
#FFA083 150
#FF916E 200
#FF7246 300
#FF531D 400
#F33A00 500
#C52F00 600
#972400 700
#801F00 750
#691900 800
#521400 850

Palette

Orange.-
#FFDAB8 50
#FFCFA3 100
#FFC58F 150
#FFBA7A 200
#FFA552 300
#FF9029 400
#FF7B00 500
#D16500 600
#A34F00 700
#8C4400 750
#753900 800
#5E2E00 850

Palette

Yellow.-
#FFFBEB 50
#FFF7D7 100
#FEF3C2 150
#FEEFAE 200
#FEE886 300
#FDE05D 400
#FDD835 500
#FDCF08 600
#D4AD02 700
#BD9B02 750
#A78802 800
#907601 850

Palette

Lime.-
#F4F8D5 50
#F0F5C4 100
#ECF1B2 150
#E7EEA1 200
#DFE87E 300
#D6E25C 400
#CDDC39 500
#B6C423 600
#919D1C 700
#7F8A18 750
#6D7615 800
#5B6311 850

Palette

Light Green.-
#E6F1D4 50
#DDECC5 100
#D4E7B5 150
#CBE1A6 200
#B9D787 300
#A7CD69 400
#95C34A 500
#7DA838 600
#63852C 700
#567426 750
#4A6321 800
#3D511B 850

Palette

Green.-
#CCE8CA 50
#BEE2BC 100
#B0DCAE 150
#A2D6A0 200
#86C983 300
#6ABD67 400
#50AF4C 500
#418F3E 600
#336F30 700
#2B5F29 750
#244F22 800
#1D3F1B 850

Palette

Teal.-
#AEF2DE 50
#9DEFD7 100
#8BEDD0 150
#7AEAC9 200
#56E4BA 300
#33DFAC 400
#20C997 500
#1AA179 600
#137A5C 700
#10664D 750
#0D523E 800
#0A3E2F 850

Palette

Cyan.-
#AEF2EF 50
#9DEFEB 100
#8BEDE8 150
#7AEAE4 200
#56E4DD 300
#33DFD6 400
#20C9C1 500
#1AA19B 600
#137A75 700
#106662 750
#0D524F 800
#0A3E3C 850

Palette

Light Blue.-
#CFECFC 50
#BCE5FB 100
#A8DDFA 150
#95D6F9 200
#6EC6F7 300
#48B7F5 400
#21A8F3 500
#0C91DA 600
#0974AF 700
#086599 750
#075783 800
#06486D 850

Palette

Blue.-
#B8CAFF 50
#A3BAFF 100
#8FABFF 150
#7A9CFF 200
#527DFF 300
#295FFF 400
#0040FF 500
#0034D1 600
#0029A3 700
#00238C 750
#001D75 800
#00185E 850

Palette

Indigo.-
#B5C0E6 50
#A6B3E1 100
#97A6DC 150
#8799D7 200
#6980CD 300
#4A66C3 400
#3953AB 500
#2E4289 600
#223266 700
#1C2955 750
#172144 800
#111933 850

Palette

Purple.-
#CBBEEA 50
#BEAFE6 100
#B19FE1 150
#A590DC 200
#8C71D2 300
#7352C8 400
#5D3AB7 500
#4B2F94 600
#3A2471 700
#311E60 750
#28194E 800
#1F133D 850

Palette

Pink.-
#F9C5D7 50
#F8B3CA 100
#F6A0BD 150
#F48DB0 200
#F06897 300
#ED437D 400
#E91E63 500
#C61350 600
#9C0F3F 700
#870D37 750
#720B2E 800
#5D0926 850