Benannte Farbe · #B2A5D3
Ariel’s Delight
Ariel’s Delight ist #B2A5D3: rgb(178 165 211), hsl(257 34% 74%), oklch(0.749 0.067 297.7). Mit Tints, Shades, Harmonien, WCAG- & APCA-Kontrast sowie CSS-, Tailwind-v4- und SCSS-Code.
What does Purple mean? → · Ariel’s Delight color name →
#B2A5D3
oklch(0.749 0.067 297.7)
Farbumrechnungen
- HEX
- #b2a5d3
- RGB
- rgb(178 165 211)
- HSL
- hsl(257 34% 74%)
- HWB
- hwb(257 65% 17%)
- OKLCH
- oklch(0.749 0.067 297.7)
- OKLab
- oklab(0.749 0.031 -0.059)
- CIE Lab
- lab(70.06 11.73 -21.76)
- LCH
- lch(70.06 24.72 298.3)
- CMYK
- cmyk(16% 22% 0% 17%)
Tints · Shades · Tones
Tints
- B9AED8
- C1B7DC
- C8C0E1
- D0C8E5
- D8D1E9
- DFDAEE
- E7E4F2
- EFEDF6
- F7F6FB
Shades
- 9A8FB7
- 83799C
- 6D6582
- 575169
- 433D51
- 2F2B3A
- 1D1A24
- 0C0A10
- 010102
Tones
- ADA1CB
- A89EC2
- A39ABA
- 9E96B1
- 9993A9
- 948FA1
- 8F8B98
- 8A8790
- 858488
Farbharmonien
Komplementär +180°
- B2A5D3
Ariel’s Delight
- AAB484
≈ Great Green
Analog -30° +30°
- B2A5D3
Ariel’s Delight
- 9BADD9
≈ Aster Flower Blue
- C59FC3
≈ Pale Grape
Triadisch +120° +240°
- B2A5D3
Ariel’s Delight
- CEA484
≈ Kamut
- 7FBCAD
≈ Mintnight
Geteilt komplementär +150° +210°
- B2A5D3
Ariel’s Delight
- BFAC7D
≈ Nettle
- 92BA96
≈ Garden Swing
Tetradisch +90° +180° +270°
- B2A5D3
Ariel’s Delight
- D59E96
≈ Savoury Salmon
- AAB484
≈ Great Green
- 7ABAC3
≈ Warm Waters
Kontrast & Barrierefreiheit
Ag
FailAuf Weiß
WCAG 2.27:1 · APCA Lc 45
Ag
AAAAuf Schwarz
WCAG 9.21:1 · APCA Lc 57
Beste Textfarbe: #000000
WCAG 9.21:1 (AAA) · APCA Lc 57
Contrast pairs
Code-Snippets
CSS
:root {
--ariel-s-delight: #b2a5d3;
--ariel-s-delight-rgb: 178 165 211;
--ariel-s-delight-oklch: oklch(0.749 0.067 297.7);
}
.element {
color: var(--ariel-s-delight);
background-color: hsl(257 34% 74%);
border-color: oklch(0.749 0.067 297.7);
}Tailwind CSS v4
@theme {
--color-ariel-s-delight: #b2a5d3;
--color-ariel-s-delight-50: #f8f1ff;
--color-ariel-s-delight-100: #ebe3fc;
--color-ariel-s-delight-200: #d8ceed;
--color-ariel-s-delight-300: #bcb0d5;
--color-ariel-s-delight-400: #a396c1;
--color-ariel-s-delight-500: #8b7dad;
--color-ariel-s-delight-600: #766a92;
--color-ariel-s-delight-700: #5e5575;
--color-ariel-s-delight-800: #443e57;
--color-ariel-s-delight-900: #2f2a3d;
--color-ariel-s-delight-950: #1c1826;
}SCSS
$ariel-s-delight: #b2a5d3;
$ariel-s-delight-rgb: 178, 165, 211;
$ariel-s-delight-light: mix(#fff, $ariel-s-delight, 20%);
$ariel-s-delight-dark: mix(#000, $ariel-s-delight, 20%);
.element {
color: $ariel-s-delight;
box-shadow: 0 0 0 2px rgba($ariel-s-delight, 0.35);
}