Cor nomeada · #FFDCD2
Soft Orange Bloom
Soft Orange Bloom é #FFDCD2: rgb(255 220 210), hsl(13 100% 91%), oklch(0.921 0.041 36.5). Veja tons claros, sombras, harmonias, contraste WCAG e APCA e código CSS, Tailwind v4 e SCSS.
What does Pink mean? → · Soft Orange Bloom color name →
#FFDCD2
oklch(0.921 0.041 36.5)
Conversões de cor
- HEX
- #ffdcd2
- RGB
- rgb(255 220 210)
- HSL
- hsl(13 100% 91%)
- HWB
- hwb(13 82% 0%)
- OKLCH
- oklch(0.921 0.041 36.5)
- OKLab
- oklab(0.921 0.033 0.025)
- CIE Lab
- lab(90.53 11.39 9.65)
- LCH
- lch(90.53 14.92 40.3)
- CMYK
- cmyk(0% 14% 18% 0%)
Tons claros · Sombras · Tons
Tons claros
- FFE0D6
- FFE3DB
- FFE7DF
- FFEAE4
- FFEEE8
- FFF1ED
- FFF5F1
- FFF8F6
- FFFCFA
Sombras
- DEBFB6
- BEA39B
- 9E8881
- 806E68
- 635450
- 483C39
- 2E2624
- 161110
- 030202
Tons
- F2D2CA
- E5C9C1
- D7C0B9
- CBB6B0
- BEADA8
- B1A4A0
- A59B98
- 989290
- 8C8988
Harmonias de cor
Complementar +180°
- FFDCD2
Soft Orange Bloom
- C7ECF7
≈ Frosty Day
Análoga -30° +30°
- FFDCD2
Soft Orange Bloom
- FFDAE0
≈ It’s a Girl!
- F9E0C8
≈ Peachade
Tríade +120° +240°
- FFDCD2
Soft Orange Bloom
- D0EEDA
≈ Jade Palace
- DEE3FF
≈ Stoic White
Complementar dividida +150° +210°
- FFDCD2
Soft Orange Bloom
- C7EEE9
≈ Path to the Sky
- D0E8FF
≈ Veiling Waterfalls
Tétrade +90° +180° +270°
- FFDCD2
Soft Orange Bloom
- DEEACD
≈ Whiff of Green
- C7ECF7
≈ Frosty Day
- ECDEFB
≈ Lavender Savour
Contraste e acessibilidade
Ag
FailSobre branco
WCAG 1.27:1 · APCA Lc 14
Ag
AAASobre preto
WCAG 16.41:1 · APCA Lc 90
Melhor cor de texto: #000000
WCAG 16.41:1 (AAA) · APCA Lc 90
Contrast pairs
Trechos de código
CSS
:root {
--soft-orange-bloom: #ffdcd2;
--soft-orange-bloom-rgb: 255 220 210;
--soft-orange-bloom-oklch: oklch(0.921 0.041 36.5);
}
.element {
color: var(--soft-orange-bloom);
background-color: hsl(13 100% 91%);
border-color: oklch(0.921 0.041 36.5);
}Tailwind CSS v4
@theme {
--color-soft-orange-bloom: #ffdcd2;
--color-soft-orange-bloom-50: #fff1ed;
--color-soft-orange-bloom-100: #f5e4de;
--color-soft-orange-bloom-200: #e5cfc8;
--color-soft-orange-bloom-300: #cbb1a8;
--color-soft-orange-bloom-400: #b5968e;
--color-soft-orange-bloom-500: #9f7d73;
--color-soft-orange-bloom-600: #876a62;
--color-soft-orange-bloom-700: #6c554e;
--color-soft-orange-bloom-800: #503d39;
--color-soft-orange-bloom-900: #372a27;
--color-soft-orange-bloom-950: #221815;
}SCSS
$soft-orange-bloom: #ffdcd2;
$soft-orange-bloom-rgb: 255, 220, 210;
$soft-orange-bloom-light: mix(#fff, $soft-orange-bloom, 20%);
$soft-orange-bloom-dark: mix(#000, $soft-orange-bloom, 20%);
.element {
color: $soft-orange-bloom;
box-shadow: 0 0 0 2px rgba($soft-orange-bloom, 0.35);
}