Dichtstbijzijnde benoemde kleur · #D754E1
#D754E1
Dichtstbijzijnde benoemde kleur: Bubblegum Baby Girl
#D754E1 (rgb(215 84 225), hsl(296 70% 61%), oklch(0.67 0.23 324.8)) komt het dichtst bij de benoemde kleur Bubblegum Baby Girl. Bekijk tinten, schaduwen, harmonieën, WCAG- en APCA-contrast en CSS-, Tailwind v4- en SCSS-code.
#D754E1
oklch(0.67 0.23 324.8)
Kleurconversies
- HEX
- #d754e1
- RGB
- rgb(215 84 225)
- HSL
- hsl(296 70% 61%)
- HWB
- hwb(296 33% 12%)
- OKLCH
- oklch(0.67 0.23 324.8)
- OKLab
- oklab(0.67 0.188 -0.132)
- CIE Lab
- lab(58.07 65.12 -47.6)
- LCH
- lch(58.07 80.66 323.8)
- CMYK
- cmyk(4% 63% 0% 12%)
Tinten · Schaduwen · Tonen
Tinten
- DC69E5
- E17CE9
- E68DEC
- EB9EEF
- EFAFF2
- F3BFF5
- F6CFF8
- FADFFB
- FCEFFD
Schaduwen
- BB48C4
- 9F3CA7
- 85318B
- 6B2670
- 521B56
- 3B113E
- 250827
- 110212
- 020002
Tonen
- CF5CD7
- C762CE
- BE68C4
- B66DBB
- AD71B1
- A575A7
- 9C789E
- 937B94
- 8A7E8A
Kleurharmonieën
Complementair +180°
- D754E1
Bubblegum Baby Girl
- 00B42F
≈ Pikkoro Green
Analoog -30° +30°
- D754E1
Bubblegum Baby Girl
- A075FF
≈ Purple Illusionist
- F8419D
≈ Rose Bonbon
Triadisch +120° +240°
- D754E1
Bubblegum Baby Girl
- BC8D00
≈ Moutarde de Bénichon
- 00A9B6
≈ Bluebird
Gesplitst complementair +150° +210°
- D754E1
Bubblegum Baby Girl
- 939F00
≈ Noxious
- 00AE90
≈ Hobgoblin
Tetradisch +90° +180° +270°
- D754E1
Bubblegum Baby Girl
- E07300
≈ Manticore Wing
- 00B42F
≈ Pikkoro Green
- 00A1DF
≈ Vanadyl Blue
Contrast en toegankelijkheid
Ag
FailOp wit
WCAG 3.36:1 · APCA Lc 60
Ag
AAOp zwart
WCAG 6.24:1 · APCA Lc 41
Beste tekstkleur: #000000
WCAG 6.24:1 (AA) · APCA Lc 41
Contrast pairs
Codefragmenten
CSS
:root {
--bubblegum-baby-girl: #d754e1;
--bubblegum-baby-girl-rgb: 215 84 225;
--bubblegum-baby-girl-oklch: oklch(0.67 0.23 324.8);
}
.element {
color: var(--bubblegum-baby-girl);
background-color: hsl(296 70% 61%);
border-color: oklch(0.67 0.23 324.8);
}Tailwind CSS v4
@theme {
--color-bubblegum-baby-girl: #d754e1;
--color-bubblegum-baby-girl-50: #ffdfff;
--color-bubblegum-baby-girl-100: #ffcdff;
--color-bubblegum-baby-girl-200: #ffb0ff;
--color-bubblegum-baby-girl-300: #f389f4;
--color-bubblegum-baby-girl-400: #de63e8;
--color-bubblegum-baby-girl-500: #cc34d7;
--color-bubblegum-baby-girl-600: #ac2fb6;
--color-bubblegum-baby-girl-700: #8a2692;
--color-bubblegum-baby-girl-800: #651a6f;
--color-bubblegum-baby-girl-900: #47114e;
--color-bubblegum-baby-girl-950: #2e0234;
}SCSS
$bubblegum-baby-girl: #d754e1;
$bubblegum-baby-girl-rgb: 215, 84, 225;
$bubblegum-baby-girl-light: mix(#fff, $bubblegum-baby-girl, 20%);
$bubblegum-baby-girl-dark: mix(#000, $bubblegum-baby-girl, 20%);
.element {
color: $bubblegum-baby-girl;
box-shadow: 0 0 0 2px rgba($bubblegum-baby-girl, 0.35);
}