Benannte Farbe · #C4C0E9
Violet Gems
Violet Gems ist #C4C0E9: rgb(196 192 233), hsl(246 48% 83%), oklch(0.824 0.057 289.6). Mit Tints, Shades, Harmonien, WCAG- & APCA-Kontrast sowie CSS-, Tailwind-v4- und SCSS-Code.
What does Purple mean? → · Violet Gems color name →
#C4C0E9
oklch(0.824 0.057 289.6)
Farbumrechnungen
- HEX
- #c4c0e9
- RGB
- rgb(196 192 233)
- HSL
- hsl(246 48% 83%)
- HWB
- hwb(246 75% 9%)
- OKLCH
- oklch(0.824 0.057 289.6)
- OKLab
- oklab(0.824 0.019 -0.054)
- CIE Lab
- lab(79.05 7.55 -19.96)
- LCH
- lch(79.05 21.34 290.7)
- CMYK
- cmyk(16% 18% 0% 9%)
Tints · Shades · Tones
Tints
- CAC6EB
- CFCCEE
- D5D3F0
- DBD9F2
- E1DFF4
- E7E6F7
- EDECF9
- F3F2FB
- F9F9FD
Shades
- AAA7CB
- 918EAD
- 787690
- 615F74
- 4A495A
- 353441
- 212029
- 0E0E13
- 020203
Tones
- BDB9DE
- B6B3D3
- AFACC9
- A8A6BE
- A1A0B3
- 9A99A9
- 94939F
- 8D8D94
- 87868A
Farbharmonien
Komplementär +180°
- C4C0E9
Violet Gems
- C7C99F
≈ Mint Ice Green
Analog -30° +30°
- C4C0E9
Violet Gems
- B0C7EB
≈ Promise Keeping
- D6BADD
≈ Plum Point
Triadisch +120° +240°
- C4C0E9
Violet Gems
- E5BBA5
≈ Starfish
- A1D2C0
≈ Flowering Cactus
Geteilt komplementär +150° +210°
- C4C0E9
Violet Gems
- DAC29C
≈ Natural Twine
- B3CFAC
≈ Gio Ponti Green
Tetradisch +90° +180° +270°
- C4C0E9
Violet Gems
- E9B7B7
≈ Summer Cocktails
- C7C99F
≈ Mint Ice Green
- 9AD1D4
≈ Morning Glory
Kontrast & Barrierefreiheit
Ag
FailAuf Weiß
WCAG 1.74:1 · APCA Lc 32
Ag
AAAAuf Schwarz
WCAG 12.06:1 · APCA Lc 71
Beste Textfarbe: #000000
WCAG 12.06:1 (AAA) · APCA Lc 71
Contrast pairs
Code-Snippets
CSS
:root {
--violet-gems: #c4c0e9;
--violet-gems-rgb: 196 192 233;
--violet-gems-oklch: oklch(0.824 0.057 289.6);
}
.element {
color: var(--violet-gems);
background-color: hsl(246 48% 83%);
border-color: oklch(0.824 0.057 289.6);
}Tailwind CSS v4
@theme {
--color-violet-gems: #c4c0e9;
--color-violet-gems-50: #f5f3ff;
--color-violet-gems-100: #e8e5fa;
--color-violet-gems-200: #d4d0eb;
--color-violet-gems-300: #b7b3d3;
--color-violet-gems-400: #9d99bf;
--color-violet-gems-500: #8580aa;
--color-violet-gems-600: #706d90;
--color-violet-gems-700: #5a5773;
--color-violet-gems-800: #413f55;
--color-violet-gems-900: #2d2c3c;
--color-violet-gems-950: #1a1925;
}SCSS
$violet-gems: #c4c0e9;
$violet-gems-rgb: 196, 192, 233;
$violet-gems-light: mix(#fff, $violet-gems, 20%);
$violet-gems-dark: mix(#000, $violet-gems, 20%);
.element {
color: $violet-gems;
box-shadow: 0 0 0 2px rgba($violet-gems, 0.35);
}