Nazwany kolor · #DB88AC
Springtime Bloom
Springtime Bloom to #DB88AC: rgb(219 136 172), hsl(334 54% 70%), oklch(0.723 0.11 352.7). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Red mean? → · Springtime Bloom color name →
#DB88AC
oklch(0.723 0.11 352.7)
Konwersje koloru
- HEX
- #db88ac
- RGB
- rgb(219 136 172)
- HSL
- hsl(334 54% 70%)
- HWB
- hwb(334 53% 14%)
- OKLCH
- oklch(0.723 0.11 352.7)
- OKLab
- oklab(0.723 0.109 -0.014)
- CIE Lab
- lab(66.45 36.06 -4.95)
- LCH
- lch(66.45 36.4 352.2)
- CMYK
- cmyk(0% 38% 21% 14%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- E094B4
- E4A0BC
- E8ACC4
- ECB7CD
- F0C3D5
- F3CFDD
- F6DBE6
- F9E7EE
- FCF3F6
Odcienie ciemniejsze
- BE7595
- A2637F
- 875269
- 6D4154
- 543140
- 3C222D
- 26131B
- 11060B
- 020101
Tony
- D288A8
- C987A3
- C0879F
- B7869A
- AE8596
- A58491
- 9C838D
- 938289
- 8A8184
Harmonie kolorów
Komplementarna +180°
- DB88AC
Springtime Bloom
- 4EBC9F
≈ Jolt of Jade
Analogowa -30° +30°
- DB88AC
Springtime Bloom
- C78ECE
≈ Rose Souvenir
- E38985
≈ Boho Blush
Triada +120° +240°
- DB88AC
Springtime Bloom
- A6AD57
≈ Spinach Banana Smoothie
- 54B1DF
≈ Sail Away
Komplementarna rozszczepiona +150° +210°
- DB88AC
Springtime Bloom
- 7CB777
≈ Colour Me Green
- 36BAC4
≈ Panorama Blue
Tetrada +90° +180° +270°
- DB88AC
Springtime Bloom
- C79F4E
≈ Goldbricker
- 4EBC9F
≈ Jolt of Jade
- 80A5EB
≈ Blue Cue
Kontrast i dostępność
Ag
FailNa bieli
WCAG 2.58:1 · APCA Lc 50
Ag
AAANa czerni
WCAG 8.12:1 · APCA Lc 52
Najlepszy kolor tekstu: #000000
WCAG 8.12:1 (AAA) · APCA Lc 52
Contrast pairs
Fragmenty kodu
CSS
:root {
--springtime-bloom: #db88ac;
--springtime-bloom-rgb: 219 136 172;
--springtime-bloom-oklch: oklch(0.723 0.11 352.7);
}
.element {
color: var(--springtime-bloom);
background-color: hsl(334 54% 70%);
border-color: oklch(0.723 0.11 352.7);
}Tailwind CSS v4
@theme {
--color-springtime-bloom: #db88ac;
--color-springtime-bloom-50: #ffe9f7;
--color-springtime-bloom-100: #ffd9ea;
--color-springtime-bloom-200: #fbc1d7;
--color-springtime-bloom-300: #e5a0ba;
--color-springtime-bloom-400: #d183a4;
--color-springtime-bloom-500: #bd658d;
--color-springtime-bloom-600: #a05677;
--color-springtime-bloom-700: #80455f;
--color-springtime-bloom-800: #5f3147;
--color-springtime-bloom-900: #422231;
--color-springtime-bloom-950: #2a111d;
}SCSS
$springtime-bloom: #db88ac;
$springtime-bloom-rgb: 219, 136, 172;
$springtime-bloom-light: mix(#fff, $springtime-bloom, 20%);
$springtime-bloom-dark: mix(#000, $springtime-bloom, 20%);
.element {
color: $springtime-bloom;
box-shadow: 0 0 0 2px rgba($springtime-bloom, 0.35);
}