Named color · #6600CC
Trusted Purple
Trusted Purple is #6600CC: rgb(102 0 204), hsl(270 100% 40%), oklch(0.449 0.248 294.3). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Purple mean? → · Trusted Purple color name →
#6600CC
oklch(0.449 0.248 294.3)
Color conversions
- HEX
- #6600cc
- RGB
- rgb(102 0 204)
- HSL
- hsl(270 100% 40%)
- HWB
- hwb(270 0% 20%)
- OKLCH
- oklch(0.449 0.248 294.3)
- OKLab
- oklab(0.449 0.102 -0.226)
- CIE Lab
- lab(30.92 63.24 -80.43)
- LCH
- lch(30.92 102.32 308.2)
- CMYK
- cmyk(50% 100% 0% 20%)
Tints · Shades · Tones
Tints
- 7236D3
- 7F52DA
- 8D6AE0
- 9C80E6
- AB96EC
- BBABF1
- CBC0F5
- DCD5F9
- EDEAFC
Shades
- 5800B1
- 4A0097
- 3C007E
- 2F0065
- 23004E
- 170037
- 0C0022
- 04000F
- 000002
Tones
- 6726C6
- 6938BF
- 6B45B8
- 6D50B1
- 6F5AAA
- 7262A2
- 756A9A
- 797292
- 7C7989
Color harmonies
Complementary +180°
- 6600CC
Trusted Purple
- 555B00
≈ Greensboro
Analogous -30° +30°
- 6600CC
Trusted Purple
- 0737DB
≈ Cold Pack
- 890094
≈ Purple Feather Boa
Triadic +120° +240°
- 6600CC
Trusted Purple
- 834000
≈ Gryphonne Sepia Wash
- 006452
≈ Piney Lake
Split-complementary +150° +210°
- 6600CC
Trusted Purple
- 6D5000
≈ Field Drab
- 006814
≈ Leafy Lush
Tetradic +90° +180° +270°
- 6600CC
Trusted Purple
- A2001A
≈ Dear Darling
- 555B00
≈ Greensboro
- 006169
≈ Turkish Aqua
Contrast & accessibility
Ag
AAAOn white
WCAG 8.61:1 · APCA Lc 87
Ag
FailOn black
WCAG 2.43:1 · APCA Lc 15
Best text color: #FFFFFF
WCAG 8.61:1 (AAA) · APCA Lc 87
Contrast pairs
Code snippets
CSS
:root {
--trusted-purple: #6600cc;
--trusted-purple-rgb: 102 0 204;
--trusted-purple-oklch: oklch(0.449 0.248 294.3);
}
.element {
color: var(--trusted-purple);
background-color: hsl(270 100% 40%);
border-color: oklch(0.449 0.248 294.3);
}Tailwind CSS v4
@theme {
--color-trusted-purple: #6600cc;
--color-trusted-purple-50: #fbe7ff;
--color-trusted-purple-100: #efd7ff;
--color-trusted-purple-200: #dfbdff;
--color-trusted-purple-300: #c597ff;
--color-trusted-purple-400: #ab75ff;
--color-trusted-purple-500: #984bff;
--color-trusted-purple-600: #8041e9;
--color-trusted-purple-700: #6634bc;
--color-trusted-purple-800: #49268e;
--color-trusted-purple-900: #321a65;
--color-trusted-purple-950: #1f0846;
}SCSS
$trusted-purple: #6600cc;
$trusted-purple-rgb: 102, 0, 204;
$trusted-purple-light: mix(#fff, $trusted-purple, 20%);
$trusted-purple-dark: mix(#000, $trusted-purple, 20%);
.element {
color: $trusted-purple;
box-shadow: 0 0 0 2px rgba($trusted-purple, 0.35);
}