Tools · Palette library
OKLCH palettes, one seed at a time. 22 palettes generated from Tailwind’s color family -600 stops using the same lightness curve and chroma envelope as the generate-color-scheme play. Click any swatch to copy its hex.
Generate from a custom seed Enter any hex color to generate a 19-stop palette using the same contrast-targeting algorithm.
CSS Variables Tailwind Config Figma Variables
Copy all (CSS) 50
100
150
200
250
300
350
400
450
500
550
600
650
700
750
800
850
900
950
slate copy
50 #f9fafa
100 #eaecee
150 #d7dae0
200 #c4cad3
250 #b2bbc7
300 #a1adbd
350 #919fb3
400 #8292aa
450 #7386a1
500 #677a95
550 #5d6f88
600 #54637a
650 #4a596d
700 #414e61
750 #384454
800 #303947
850 #262e39
900 #1b212a
950 #0d1015
gray copy
50 #f9fafa
100 #eaebed
150 #d7dade
200 #c6cad0
250 #b4bbc4
300 #a4acb8
350 #959fad
400 #8692a3
450 #788699
500 #6c7a8d
550 #626e80
600 #586373
650 #4e5967
700 #454e5b
750 #3b444f
800 #323943
850 #282e36
900 #1d2127
950 #0e1014
zinc copy
50 #fafafa
100 #ebebec
150 #dadadb
200 #c9c9cc
250 #bababd
300 #ababb0
350 #9d9da3
400 #909097
450 #84848c
500 #787881
550 #6c6c76
600 #62626c
650 #575761
700 #4d4d55
750 #42424a
800 #38383e
850 #2d2d32
900 #212124
950 #101013
neutral copy
50 #fafafa
100 #ebebeb
150 #dadada
200 #cacaca
250 #bababa
300 #acacac
350 #9e9e9e
400 #919191
450 #848484
500 #797979
550 #6d6d6d
600 #626262
650 #585858
700 #4d4d4d
750 #434343
800 #383838
850 #2d2d2d
900 #212121
950 #101010
stone copy
50 #fafaf9
100 #edebe9
150 #ddd9d5
200 #cec9c2
250 #c0b9b1
300 #b1aba2
350 #a39d95
400 #969088
450 #89847c
500 #7d7871
550 #726d66
600 #66625c
650 #5b5752
700 #504d48
750 #46423e
800 #3b3835
850 #2f2d2a
900 #22211f
950 #11100f
red copy
50 #fdf9f8
100 #f7e8e6
150 #f2d3cf
200 #f0beb7
250 #f0a89f
300 #f09387
350 #f17b6f
400 #f36156
450 #f4403a
500 #e82b2a
550 #d42424
600 #c02020
650 #ad1b1b
700 #991717
750 #861414
800 #711211
850 #5c100e
900 #430c0a
950 #250605
orange copy
50 #fdf9f7
100 #f8e8e3
150 #f4d3c7
200 #f3beaa
250 #f4a88c
300 #f5926c
350 #f87947
400 #f66019
450 #e4560b
500 #d14e09
550 #be4606
600 #ad3e04
650 #9b3703
700 #8a3002
750 #792801
800 #682100
850 #541b03
900 #3d1403
950 #210902
amber copy
50 #fdf9f6
100 #f8e9de
150 #f5d4bb
200 #f4bf97
250 #f5aa6e
300 #f89336
350 #ea841f
400 #da7807
450 #c86d05
500 #b76303
550 #a65a02
600 #965002
650 #874701
700 #783f00
750 #683600
800 #592d00
850 #482402
900 #351a03
950 #1c0c02
yellow copy
50 #fef9ee
100 #fbeac2
150 #fdd670
200 #f5c32f
250 #e2b42a
300 #d1a626
350 #c09922
400 #b18c1f
450 #a2801b
500 #947517
550 #866a14
600 #795f11
650 #6c550e
700 #604b0b
750 #534108
800 #473606
850 #392c04
900 #2a2002
950 #170f01
lime copy
50 #f5fdf0
100 #d1f7b2
150 #acec70
200 #9adc58
250 #8acc43
300 #7bbd2f
350 #6faf1d
400 #64a10d
450 #5b930a
500 #528608
550 #4a7a06
600 #426e05
650 #3b6204
700 #335703
750 #2c4b02
800 #254002
850 #1d3304
900 #152504
950 #091303
green copy
50 #f4fdf5
100 #c8f7cf
150 #7af296
200 #63e283
250 #4dd372
300 #3ac363
350 #29b557
400 #1aa74d
450 #149945
500 #118b3e
550 #0e7e38
600 #0b7231
650 #08662b
700 #065a25
750 #044e1f
800 #06421b
850 #073515
900 #06270f
950 #031407
emerald copy
50 #f2fdf7
100 #c3f7dd
150 #79f0bc
200 #61e0ab
250 #4dd09c
300 #39c18e
350 #27b381
400 #17a575
450 #06976a
500 #048a60
550 #037d57
600 #02714e
650 #016545
700 #01593d
750 #034d35
800 #05412c
850 #063423
900 #062619
950 #03130c
teal copy
50 #f1fdfb
100 #bbf7ee
150 #7cedde
200 #65ddce
250 #50cdbf
300 #3cbeb0
350 #2bb0a2
400 #1ca295
450 #0d9488
500 #0b877c
550 #087b71
600 #066f66
650 #05635a
700 #035750
750 #054c45
800 #06403a
850 #07332f
900 #062522
950 #041311
cyan copy
50 #f5fbfd
100 #d9eff8
150 #afe2f4
200 #7fd5f3
250 #4ec8ed
300 #3bb9de
350 #28abcf
400 #189dc0
450 #0890b1
500 #0683a2
550 #057793
600 #036b84
650 #026076
700 #015569
750 #024a5c
800 #053e4d
850 #06323e
900 #06242d
950 #031218
sky copy
50 #f7fafd
100 #e1edf7
150 #c2def3
200 #a2cff2
250 #7fc1f3
300 #57b3f5
350 #2aa6f1
400 #1a98e1
450 #0a8bd1
500 #027fbf
550 #0173af
600 #00689e
650 #005d8e
700 #00527e
750 #02476d
800 #043c5c
850 #05304b
900 #052336
950 #03121d
blue copy
50 #f8fafc
100 #e6ecf6
150 #cfdbf0
200 #b8cbec
250 #a1bbeb
300 #8cacea
350 #769eea
400 #618feb
450 #4d81eb
500 #3972eb
550 #2563eb
600 #1154e8
650 #0d4bd2
700 #0a41bb
750 #0839a4
800 #07308b
850 #062771
900 #041c55
950 #010c35
indigo copy
50 #f9fafc
100 #e9ebf5
150 #d5d9ef
200 #c2c8eb
250 #afb8e9
300 #9ea8e8
350 #8d98e8
400 #7f89e7
450 #717ae7
500 #656be7
550 #5a5be6
600 #514ae5
650 #4936e4
700 #402fcc
750 #3729b2
800 #2e2496
850 #241e79
900 #1a1659
950 #0b0b30
violet copy
50 #faf9fc
100 #eceaf6
150 #dbd7f0
200 #ccc5ed
250 #bdb3ec
300 #b1a2eb
350 #a590ec
400 #9a7fec
450 #916eed
500 #885ced
550 #8048ed
600 #7930ed
650 #6d2ad5
700 #6024be
750 #5320a6
800 #461c8c
850 #381870
900 #281253
950 #14092c
purple copy
50 #faf9fc
100 #eee9f6
150 #dfd6f0
200 #d3c3ed
250 #c7b0eb
300 #bd9deb
350 #b38beb
400 #ab78eb
450 #a365ec
500 #9c51ec
550 #9638ec
600 #882fd9
650 #7a29c4
700 #6c23ae
750 #5e1f97
800 #4f1b80
850 #3f1767
900 #2e114c
950 #180829
fuchsia copy
50 #fcf8fd
100 #f5e7f7
150 #efd0f2
200 #eabaf0
250 #e7a2ef
300 #e48af0
350 #e270f1
400 #e052f2
450 #d836ec
500 #c72adb
550 #b623c8
600 #a51fb5
650 #941ba3
700 #841691
750 #73127f
800 #61116b
850 #4e0f56
900 #390c3f
950 #1e0622
pink copy
50 #fdf8f9
100 #f7e8eb
150 #f2d2da
200 #f0bcca
250 #f0a5bb
300 #f08ead
350 #f2759f
400 #f35993
450 #f33486
500 #e02a7a
550 #cd246f
600 #ba1f64
650 #a71b59
700 #94174f
750 #821344
800 #6e1139
850 #590f2e
900 #410c21
950 #230610
rose copy
50 #fdf9f9
100 #f7e8e8
150 #f3d2d2
200 #f1bdbe
250 #f1a7a9
300 #f29094
350 #f47780
400 #f65b6c
450 #f83557
500 #e9214c
550 #d51b44
600 #c1173d
650 #ae1336
700 #9a102e
750 #870d28
800 #720d22
850 #5c0d1b
900 #440a13
950 #250509
Generated using the algorithm in kb/principles/color/palette-generation . Custom seeds: POST /api/palette. Regenerate: npm run palettes.