Benannte Farbe · #B48AC2
Creeping Bellflower
Creeping Bellflower ist #B48AC2: rgb(180 138 194), hsl(285 31% 65%), oklch(0.693 0.093 317.5). Mit Tints, Shades, Harmonien, WCAG- & APCA-Kontrast sowie CSS-, Tailwind-v4- und SCSS-Code.
What does Purple mean? → · Creeping Bellflower color name →
#B48AC2
oklch(0.693 0.093 317.5)
Farbumrechnungen
- HEX
- #b48ac2
- RGB
- rgb(180 138 194)
- HSL
- hsl(285 31% 65%)
- HWB
- hwb(285 54% 24%)
- OKLCH
- oklch(0.693 0.093 317.5)
- OKLab
- oklab(0.693 0.068 -0.063)
- CIE Lab
- lab(63.05 23.94 -22.93)
- LCH
- lch(63.05 33.15 316.2)
- CMYK
- cmyk(7% 29% 0% 24%)
Tints · Shades · Tones
Tints
- BB95C8
- C3A1CE
- CAACD5
- D2B8DB
- D9C4E1
- E1CFE7
- E8DBED
- F0E7F3
- F7F3F9
Shades
- 9C77A8
- 85658F
- 6E5377
- 584260
- 443249
- 302234
- 1D1420
- 0C070E
- 020102
Tones
- AF89BB
- AA88B5
- A488AE
- 9F87A7
- 9A86A1
- 95859A
- 908394
- 8A828D
- 858187
Farbharmonien
Komplementär +180°
- B48AC2
Creeping Bellflower
- 80AA71
≈ Sage Garden
Analog -30° +30°
- B48AC2
Creeping Bellflower
- 9993D3
≈ Distinct Purple
- C784A7
≈ Moonlight Mauve
Triadisch +120° +240°
- B48AC2
Creeping Bellflower
- BC9557
≈ Maple Syrup
- 49AEB0
≈ Blue Turquoise
Geteilt komplementär +150° +210°
- B48AC2
Creeping Bellflower
- A2A05A
≈ Garden of Earthly Delights
- 5DAF91
≈ O’grady Green
Tetradisch +90° +180° +270°
- B48AC2
Creeping Bellflower
- CC8A69
≈ Escalope
- 80AA71
≈ Sage Garden
- 57A8C9
≈ Estero Sky
Kontrast & Barrierefreiheit
Ag
FailAuf Weiß
WCAG 2.85:1 · APCA Lc 55
Ag
AAAAuf Schwarz
WCAG 7.35:1 · APCA Lc 47
Beste Textfarbe: #000000
WCAG 7.35:1 (AAA) · APCA Lc 47
Contrast pairs
Code-Snippets
CSS
:root {
--creeping-bellflower: #b48ac2;
--creeping-bellflower-rgb: 180 138 194;
--creeping-bellflower-oklch: oklch(0.693 0.093 317.5);
}
.element {
color: var(--creeping-bellflower);
background-color: hsl(285 31% 65%);
border-color: oklch(0.693 0.093 317.5);
}Tailwind CSS v4
@theme {
--color-creeping-bellflower: #b48ac2;
--color-creeping-bellflower-50: #ffedff;
--color-creeping-bellflower-100: #f6dffc;
--color-creeping-bellflower-200: #e6c8ee;
--color-creeping-bellflower-300: #cda9d6;
--color-creeping-bellflower-400: #b58dc3;
--color-creeping-bellflower-500: #9f72ae;
--color-creeping-bellflower-600: #876193;
--color-creeping-bellflower-700: #6c4d76;
--color-creeping-bellflower-800: #4f3858;
--color-creeping-bellflower-900: #37263e;
--color-creeping-bellflower-950: #221527;
}SCSS
$creeping-bellflower: #b48ac2;
$creeping-bellflower-rgb: 180, 138, 194;
$creeping-bellflower-light: mix(#fff, $creeping-bellflower, 20%);
$creeping-bellflower-dark: mix(#000, $creeping-bellflower, 20%);
.element {
color: $creeping-bellflower;
box-shadow: 0 0 0 2px rgba($creeping-bellflower, 0.35);
}