Benannte Farbe · #3C94C1
Opalescent
Opalescent ist #3C94C1: rgb(60 148 193), hsl(200 53% 50%), oklch(0.633 0.107 234.4). Mit Tints, Shades, Harmonien, WCAG- & APCA-Kontrast sowie CSS-, Tailwind-v4- und SCSS-Code.
What does Blue mean? → · Opalescent color name →
#3C94C1
oklch(0.633 0.107 234.4)
Farbumrechnungen
- HEX
- #3c94c1
- RGB
- rgb(60 148 193)
- HSL
- hsl(200 53% 50%)
- HWB
- hwb(200 24% 24%)
- OKLCH
- oklch(0.633 0.107 234.4)
- OKLab
- oklab(0.633 -0.062 -0.087)
- CIE Lab
- lab(57.53 -16.08 -31.66)
- LCH
- lch(57.53 35.51 243.1)
- CMYK
- cmyk(69% 23% 0% 24%)
Tints · Shades · Tones
Tints
- 539FC8
- 68A9CE
- 7CB4D4
- 8FBFDB
- A2C9E1
- B5D4E7
- C7DFED
- DAE9F3
- ECF4F9
Shades
- 3380A7
- 2A6D8F
- 215A77
- 19485F
- 113649
- 0A2634
- 041620
- 01080E
- 000102
Tones
- 4792BB
- 5091B4
- 588FAE
- 5F8DA7
- 658BA1
- 6B899A
- 718794
- 76858D
- 7B8287
Farbharmonien
Komplementär +180°
- 3C94C1
Opalescent
- BC7747
≈ Palomino
Analog -30° +30°
- 3C94C1
Opalescent
- 089CA8
≈ Turkish Boy
- 6988CB
≈ Livid
Triadisch +120° +240°
- 3C94C1
Opalescent
- BC6E8E
≈ Pinky Pickle
- 89913F
≈ Wasabi Nuts
Geteilt komplementär +150° +210°
- 3C94C1
Opalescent
- C26F69
≈ Contessa
- A88433
≈ Cloisonné Gold
Tetradisch +90° +180° +270°
- 3C94C1
Opalescent
- AA73AE
≈ Berry Burst
- BC7747
≈ Palomino
- 5F9B60
≈ Mosaic Green
Kontrast & Barrierefreiheit
Ag
FailAuf Weiß
WCAG 3.38:1 · APCA Lc 61
Ag
AAAuf Schwarz
WCAG 6.19:1 · APCA Lc 41
Beste Textfarbe: #000000
WCAG 6.19:1 (AA) · APCA Lc 41
Contrast pairs
Code-Snippets
CSS
:root {
--opalescent: #3c94c1;
--opalescent-rgb: 60 148 193;
--opalescent-oklch: oklch(0.633 0.107 234.4);
}
.element {
color: var(--opalescent);
background-color: hsl(200 53% 50%);
border-color: oklch(0.633 0.107 234.4);
}Tailwind CSS v4
@theme {
--color-opalescent: #3c94c1;
--color-opalescent-50: #d9fbff;
--color-opalescent-100: #c7eeff;
--color-opalescent-200: #a9dcfc;
--color-opalescent-300: #81c0e7;
--color-opalescent-400: #58a9d4;
--color-opalescent-500: #2891c2;
--color-opalescent-600: #257aa4;
--color-opalescent-700: #1d6284;
--color-opalescent-800: #104861;
--color-opalescent-900: #0a3244;
--color-opalescent-950: #001e2c;
}SCSS
$opalescent: #3c94c1;
$opalescent-rgb: 60, 148, 193;
$opalescent-light: mix(#fff, $opalescent, 20%);
$opalescent-dark: mix(#000, $opalescent, 20%);
.element {
color: $opalescent;
box-shadow: 0 0 0 2px rgba($opalescent, 0.35);
}