Named color · #657AEF
Pan Purple
Pan Purple is #657AEF: rgb(101 122 239), hsl(231 81% 67%), oklch(0.622 0.176 272.6). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Blue mean? → · Pan Purple color name →
#657AEF
oklch(0.622 0.176 272.6)
Color conversions
- HEX
- #657aef
- RGB
- rgb(101 122 239)
- HSL
- hsl(231 81% 67%)
- HWB
- hwb(231 40% 6%)
- OKLCH
- oklch(0.622 0.176 272.6)
- OKLab
- oklab(0.622 0.008 -0.176)
- CIE Lab
- lab(54.11 18.81 -62.6)
- LCH
- lch(54.11 65.37 286.7)
- CMYK
- cmyk(58% 49% 0% 6%)
Tints · Shades · Tones
Tints
- 7388F2
- 8196F5
- 8FA4F7
- 9EB1F9
- AEBEFB
- BDCBFC
- CDD8FD
- DEE5FE
- EEF2FF
Shades
- 5769D0
- 4959B1
- 3C4994
- 2F3A78
- 222B5C
- 171D42
- 0C102A
- 030514
- 000103
Tones
- 677CE4
- 6A7DD9
- 6C7ECE
- 6F7FC4
- 7180B9
- 7480AE
- 7781A2
- 7A8197
- 7D808C
Color harmonies
Complementary +180°
- 657AEF
Pan Purple
- A28300
≈ Pestilence
Analogous -30° +30°
- 657AEF
Pan Purple
- 008ED8
≈ Kahu Blue
- 9C67DD
≈ Legendary Lavender
Triadic +120° +240°
- 657AEF
Pan Purple
- DC543A
≈ Scarlet Sun
- 00A154
≈ Full Energy
Split-complementary +150° +210°
- 657AEF
Pan Purple
- C17000
≈ Desert Sun
- 779400
≈ Mossy Woods
Tetradic +90° +180° +270°
Contrast & accessibility
Ag
FailOn white
WCAG 3.76:1 · APCA Lc 65
Ag
AAOn black
WCAG 5.58:1 · APCA Lc 37
Best text color: #000000
WCAG 5.58:1 (AA) · APCA Lc 37
Contrast pairs
Code snippets
CSS
:root {
--pan-purple: #657aef;
--pan-purple-rgb: 101 122 239;
--pan-purple-oklch: oklch(0.622 0.176 272.6);
}
.element {
color: var(--pan-purple);
background-color: hsl(231 81% 67%);
border-color: oklch(0.622 0.176 272.6);
}Tailwind CSS v4
@theme {
--color-pan-purple: #657aef;
--color-pan-purple-50: #e6f2ff;
--color-pan-purple-100: #d6e4ff;
--color-pan-purple-200: #becfff;
--color-pan-purple-300: #9dafff;
--color-pan-purple-400: #7d94ff;
--color-pan-purple-500: #6277f8;
--color-pan-purple-600: #5365d1;
--color-pan-purple-700: #4251a8;
--color-pan-purple-800: #2c3b7e;
--color-pan-purple-900: #1e2959;
--color-pan-purple-950: #0e163d;
}SCSS
$pan-purple: #657aef;
$pan-purple-rgb: 101, 122, 239;
$pan-purple-light: mix(#fff, $pan-purple, 20%);
$pan-purple-dark: mix(#000, $pan-purple, 20%);
.element {
color: $pan-purple;
box-shadow: 0 0 0 2px rgba($pan-purple, 0.35);
}