Violet Pulse
Brand & PlayfulRich royal purple with wide-gamut Display-P3 chromatic depth, tailored for creative portfolios and SaaS branding.
About the Violet Pulse palette
Rich royal purple with wide-gamut Display-P3 chromatic depth, tailored for creative portfolios and SaaS branding. The scale is anchored at hue 305 in OKLCH, so every step keeps the same hue while lightness moves in perceptually even steps from 50 to 950. The 500 step (#9738e1) is your base color. Shades 500-950 pass WCAG 2.1 AA against white and shades 50, 100, 200, 300, 400 pass against black, so use the light end for backgrounds and the dark end for text on light surfaces (or vice versa). Each value is copy-ready as oklch(), HEX, RGB or HSL.
11 colors · click a card to copy
cart writes to --color-violet-pulse-*
Shade Step Breakdown (50 to 950)
| Swatch | Shade Step | OKLCH CSS Value | sRGB Fallback | RGB | HSL | WCAG on Black | WCAG on White | Gamut |
|---|---|---|---|---|---|---|---|---|
| 50 | oklch(97.0% 0.017 305.0) | #f8f2ff | rgb(248, 242, 255) | hsl(265.29, 97.19%, 97.5%) | 19.14:1 | 1.1:1 | sRGB | |
| 100 | oklch(93.0% 0.041 305.0) | #eee2ff | rgb(238, 226, 255) | hsl(265.79, 97.03%, 94.14%) | 16.96:1 | 1.24:1 | sRGB | |
| 200 | oklch(86.0% 0.084 305.0) | #dec4fe | rgb(222, 196, 254) | hsl(266.77, 96.96%, 88.16%) | 13.43:1 | 1.56:1 | sRGB | |
| 300 | oklch(76.0% 0.151 305.0) | #c896fe | rgb(200, 151, 253) | hsl(268.56, 97.15%, 79.21%) | 9.25:1 | 2.27:1 | sRGB | |
| 400 | oklch(64.0% 0.239 305.0) | #af56fd | rgb(175, 86, 253) | hsl(271.98, 97.43%, 66.47%) | 5.57:1 | 3.77:1 | sRGB | |
| 500 | oklch(56.0% 0.240 305.0) | #9738e1 | rgb(151, 56, 225) | hsl(273.43, 74.11%, 55.27%) | 3.97:1 | 5.29:1 | sRGB | |
| 600 | oklch(45.0% 0.229 305.0) | #7408b7 | rgb(116, 8, 183) | hsl(277.12, 91.46%, 37.52%) | 2.46:1 | 8.53:1 | sRGB | |
| 700 | oklch(37.0% 0.188 305.0) | #58058c | rgb(88, 5, 140) | hsl(276.91, 93.62%, 28.43%) | 1.82:1 | 11.57:1 | sRGB | |
| 800 | oklch(28.0% 0.142 305.0) | #3a025f | rgb(58, 2, 95) | hsl(276.2, 95.87%, 19.01%) | 1.35:1 | 15.51:1 | sRGB | |
| 900 | oklch(20.0% 0.102 305.0) | #21013a | rgb(33, 1, 58) | hsl(274.42, 97.51%, 11.42%) | 1.13:1 | 18.58:1 | sRGB | |
| 950 | oklch(13.0% 0.066 305.0) | #0e001c | rgb(14, 0, 28) | hsl(269.21, 98.61%, 5.48%) | 1.04:1 | 20.28:1 | sRGB |
Tailwind v4 @theme Snippet for Violet Pulse
Copy into global.css
@theme {
--color-violet-pulse-50: oklch(97.0% 0.017 305.0);
--color-violet-pulse-100: oklch(93.0% 0.041 305.0);
--color-violet-pulse-200: oklch(86.0% 0.084 305.0);
--color-violet-pulse-300: oklch(76.0% 0.151 305.0);
--color-violet-pulse-400: oklch(64.0% 0.239 305.0);
--color-violet-pulse-500: oklch(56.0% 0.240 305.0);
--color-violet-pulse-600: oklch(45.0% 0.229 305.0);
--color-violet-pulse-700: oklch(37.0% 0.188 305.0);
--color-violet-pulse-800: oklch(28.0% 0.142 305.0);
--color-violet-pulse-900: oklch(20.0% 0.102 305.0);
--color-violet-pulse-950: oklch(13.0% 0.066 305.0);
}Convert Violet Pulse shades
Working with these shades in another format? Use the matching converter — the same values you see above, converted instantly with live gamut detection.