Colors

CSS Color (Module Level 4) Palette & Gradient Generator

Generate color palette and gradients from any CSS Color (hex, rgb, oklch, oklab). Check contrast.

Options
Color Display
Interpolation | Ranges
Other
More Colors
  • #9a32cb
    24.95
    oklch(54.1% 0.227 312)
    -23.05
  • #a548d0
    30.21
    oklch(58.2% 0.209 313)
    -28.22
  • #af5cd5
    35.98
    oklch(62.2% 0.19 314)
    -33.97
  • #b96fda
    42.18
    oklch(66.4% 0.17 315)
    -40.24
  • #c381df
    48.77
    oklch(70.5% 0.15 315)
    -46.99
  • #cc93e4
    55.73
    oklch(74.7% 0.129 316)
    -54.21
  • #d5a5e9
    63.03
    oklch(78.9% 0.108 316)
    -61.87
  • #deb7ee
    70.67
    oklch(83.1% 0.086 316)
    -69.97
  • #e7c9f2
    78.63
    oklch(87.3% 0.065 317)
    -78.5
  • #efdbf6
    86.9
    oklch(91.5% 0.043 317)
    -87.45
  • #f7edfb
    95.47
    oklch(95.8% 0.022 317)
    -96.82
  • #fff
    104.35
    oklch(100% 0 none)
    -106.6
  • #9a32cb
    -66.19
    oklch(54.1% 0.227 312)
    62.38
  • #892eb5
    -70.61
    oklch(50% 0.205 312)
    67.02
  • #7a2b9f
    -74.68
    oklch(46% 0.183 312)
    71.39
  • #6a288a
    -78.41
    oklch(41.9% 0.16 313)
    75.48
  • #5b2475
    -81.78
    oklch(37.9% 0.138 313)
    79.29
  • #4c2061
    -84.8
    oklch(33.9% 0.115 313)
    82.8
  • #3e1c4d
    -87.14
    oklch(29.8% 0.093 314)
    85.62
  • #30173b
    -88.84
    oklch(25.8% 0.07 314)
    87.73
  • #221329
    -90.07
    oklch(21.8% 0.047 315)
    89.3
  • #160b18
    -90.93
    oklch(17.2% 0.031 319)
    90.44
  • #000
    -91.34
    oklch(0% 0 none)
    90.99
:root {
	/* 24.95 | -23.05 */
	--clr-0: #9a32cb;
	/* 30.21 | -28.22 */
	--clr-1: #a548d0;
	/* 35.98 | -33.97 */
	--clr-2: #af5cd5;
	/* 42.18 | -40.24 */
	--clr-3: #b96fda;
	/* 48.77 | -46.99 */
	--clr-4: #c381df;
	/* 55.73 | -54.21 */
	--clr-5: #cc93e4;
	/* 63.03 | -61.87 */
	--clr-6: #d5a5e9;
	/* 70.67 | -69.97 */
	--clr-7: #deb7ee;
	/* 78.63 | -78.5 */
	--clr-8: #e7c9f2;
	/* 86.9 | -87.45 */
	--clr-9: #efdbf6;
	/* 95.47 | -96.82 */
	--clr-10: #f7edfb;
	/* 104.35 | -106.6 */
	--clr-11: #fff;
}

:root {
	/* 24.95 | -23.05 */
	--clr-0: oklch(54.1% 0.227 312);
	/* 30.21 | -28.22 */
	--clr-1: oklch(58.2% 0.209 313);
	/* 35.98 | -33.97 */
	--clr-2: oklch(62.2% 0.19 314);
	/* 42.18 | -40.24 */
	--clr-3: oklch(66.4% 0.17 315);
	/* 48.77 | -46.99 */
	--clr-4: oklch(70.5% 0.15 315);
	/* 55.73 | -54.21 */
	--clr-5: oklch(74.7% 0.129 316);
	/* 63.03 | -61.87 */
	--clr-6: oklch(78.9% 0.108 316);
	/* 70.67 | -69.97 */
	--clr-7: oklch(83.1% 0.086 316);
	/* 78.63 | -78.5 */
	--clr-8: oklch(87.3% 0.065 317);
	/* 86.9 | -87.45 */
	--clr-9: oklch(91.5% 0.043 317);
	/* 95.47 | -96.82 */
	--clr-10: oklch(95.8% 0.022 317);
	/* 104.35 | -106.6 */
	--clr-11: oklch(100% 0 none);
}
:root {
	 --gradient-1:
	#9a32cb,
	#a548d0,
	#af5cd5,
	#b96fda,
	#c381df,
	#cc93e4,
	#d5a5e9,
	#deb7ee,
	#e7c9f2,
	#efdbf6,
	#f7edfb,
	#fff;
}
:root {
	 --gradient-1:
	oklch(54.1% 0.227 312),
	oklch(58.2% 0.209 313),
	oklch(62.2% 0.19 314),
	oklch(66.4% 0.17 315),
	oklch(70.5% 0.15 315),
	oklch(74.7% 0.129 316),
	oklch(78.9% 0.108 316),
	oklch(83.1% 0.086 316),
	oklch(87.3% 0.065 317),
	oklch(91.5% 0.043 317),
	oklch(95.8% 0.022 317),
	oklch(100% 0 none);
}
#9a32cb,
#a548d0,
#af5cd5,
#b96fda,
#c381df,
#cc93e4,
#d5a5e9,
#deb7ee,
#e7c9f2,
#efdbf6,
#f7edfb,
#fff,

oklch(54.1% 0.227 312),
oklch(58.2% 0.209 313),
oklch(62.2% 0.19 314),
oklch(66.4% 0.17 315),
oklch(70.5% 0.15 315),
oklch(74.7% 0.129 316),
oklch(78.9% 0.108 316),
oklch(83.1% 0.086 316),
oklch(87.3% 0.065 317),
oklch(91.5% 0.043 317),
oklch(95.8% 0.022 317),
oklch(100% 0 none),

:root {
	/* -66.19 | 62.38 */
	--clr-0: #9a32cb;
	/* -70.61 | 67.02 */
	--clr-1: #892eb5;
	/* -74.68 | 71.39 */
	--clr-2: #7a2b9f;
	/* -78.41 | 75.48 */
	--clr-3: #6a288a;
	/* -81.78 | 79.29 */
	--clr-4: #5b2475;
	/* -84.8 | 82.8 */
	--clr-5: #4c2061;
	/* -87.14 | 85.62 */
	--clr-6: #3e1c4d;
	/* -88.84 | 87.73 */
	--clr-7: #30173b;
	/* -90.07 | 89.3 */
	--clr-8: #221329;
	/* -90.93 | 90.44 */
	--clr-9: #160b18;
	/* -91.34 | 90.99 */
	--clr-10: #000;
}

:root {
	/* -66.19 | 62.38 */
	--clr-0: oklch(54.1% 0.227 312);
	/* -70.61 | 67.02 */
	--clr-1: oklch(50% 0.205 312);
	/* -74.68 | 71.39 */
	--clr-2: oklch(46% 0.183 312);
	/* -78.41 | 75.48 */
	--clr-3: oklch(41.9% 0.16 313);
	/* -81.78 | 79.29 */
	--clr-4: oklch(37.9% 0.138 313);
	/* -84.8 | 82.8 */
	--clr-5: oklch(33.9% 0.115 313);
	/* -87.14 | 85.62 */
	--clr-6: oklch(29.8% 0.093 314);
	/* -88.84 | 87.73 */
	--clr-7: oklch(25.8% 0.07 314);
	/* -90.07 | 89.3 */
	--clr-8: oklch(21.8% 0.047 315);
	/* -90.93 | 90.44 */
	--clr-9: oklch(17.2% 0.031 319);
	/* -91.34 | 90.99 */
	--clr-10: oklch(0% 0 none);
}
:root {
	 --gradient-1:
	#9a32cb,
	#892eb5,
	#7a2b9f,
	#6a288a,
	#5b2475,
	#4c2061,
	#3e1c4d,
	#30173b,
	#221329,
	#160b18,
	#000;
}
:root {
	 --gradient-1:
	oklch(54.1% 0.227 312),
	oklch(50% 0.205 312),
	oklch(46% 0.183 312),
	oklch(41.9% 0.16 313),
	oklch(37.9% 0.138 313),
	oklch(33.9% 0.115 313),
	oklch(29.8% 0.093 314),
	oklch(25.8% 0.07 314),
	oklch(21.8% 0.047 315),
	oklch(17.2% 0.031 319),
	oklch(0% 0 none);
}
#9a32cb,
#892eb5,
#7a2b9f,
#6a288a,
#5b2475,
#4c2061,
#3e1c4d,
#30173b,
#221329,
#160b18,
#000,

oklch(54.1% 0.227 312),
oklch(50% 0.205 312),
oklch(46% 0.183 312),
oklch(41.9% 0.16 313),
oklch(37.9% 0.138 313),
oklch(33.9% 0.115 313),
oklch(29.8% 0.093 314),
oklch(25.8% 0.07 314),
oklch(21.8% 0.047 315),
oklch(17.2% 0.031 319),
oklch(0% 0 none),

Accessible color palette generator from color

Use any CSS Color Module Level 4 .

Explore color shades, tints and tones.

Create beautiful and balanced color schemes for your website.

Built with ColorJS and SvelteKit