Colore con nome · #F7BEA2
Coral Blossom
Coral Blossom è #F7BEA2: rgb(247 190 162), hsl(20 84% 80%), oklch(0.846 0.076 47.4). Scopri tinte, ombre, armonie, contrasto WCAG e APCA e codice CSS, Tailwind v4 e SCSS.
What does Orange mean? → · Coral Blossom color name →
#F7BEA2
oklch(0.846 0.076 47.4)
Conversioni di colore
- HEX
- #f7bea2
- RGB
- rgb(247 190 162)
- HSL
- hsl(20 84% 80%)
- HWB
- hwb(20 64% 3%)
- OKLCH
- oklch(0.846 0.076 47.4)
- OKLab
- oklab(0.846 0.052 0.056)
- CIE Lab
- lab(81.73 18.41 22.5)
- LCH
- lch(81.73 29.08 50.7)
- CMYK
- cmyk(0% 23% 34% 3%)
Tinte · Ombre · Toni
Tinte
- F8C5AB
- F9CBB5
- FAD2BE
- FBD8C7
- FCDFD0
- FDE5DA
- FEECE3
- FEF2EC
- FFF9F6
Ombre
- D7A58C
- B78C77
- 997563
- 7C5E4F
- 60483C
- 45332A
- 2C1F19
- 150D0A
- 030201
Toni
- EBB89F
- DFB19B
- D2AB98
- C6A595
- BB9F91
- AF998E
- A3928B
- 978C87
- 8C8684
Armonie di colore
Complementare +180°
- F7BEA2
Coral Blossom
- 97D7F4
≈ Juzcar Blue
Analogo -30° +30°
- F7BEA2
Coral Blossom
- FAB9BA
≈ Peach Whisper
- E9C794
≈ Chestnut Dressing
Triadico +120° +240°
- F7BEA2
Coral Blossom
- 9CDDC2
≈ Almost Aqua
- C9C5FC
≈ Light Periwinkle
Complementare divisa +150° +210°
- F7BEA2
Coral Blossom
- 8FDCDE
≈ Paradisiacal Getaway
- ADCFFF
≈ Night Snow
Tetradico +90° +180° +270°
- F7BEA2
Coral Blossom
- B5D9A8
≈ Apple Cream
- 97D7F4
≈ Juzcar Blue
- E1BDEE
≈ Beefy Pink
Contrasto e accessibilità
Ag
FailSu bianco
WCAG 1.63:1 · APCA Lc 28
Ag
AAASu nero
WCAG 12.84:1 · APCA Lc 75
Miglior colore del testo: #000000
WCAG 12.84:1 (AAA) · APCA Lc 75
Contrast pairs
Frammenti di codice
CSS
:root {
--coral-blossom: #f7bea2;
--coral-blossom-rgb: 247 190 162;
--coral-blossom-oklch: oklch(0.846 0.076 47.4);
}
.element {
color: var(--coral-blossom);
background-color: hsl(20 84% 80%);
border-color: oklch(0.846 0.076 47.4);
}Tailwind CSS v4
@theme {
--color-coral-blossom: #f7bea2;
--color-coral-blossom-50: #ffefe2;
--color-coral-blossom-100: #fee1d2;
--color-coral-blossom-200: #f0cbb8;
--color-coral-blossom-300: #d9ad95;
--color-coral-blossom-400: #c59178;
--color-coral-blossom-500: #b07659;
--color-coral-blossom-600: #95644c;
--color-coral-blossom-700: #77503d;
--color-coral-blossom-800: #593a2c;
--color-coral-blossom-900: #3e281e;
--color-coral-blossom-950: #27160e;
}SCSS
$coral-blossom: #f7bea2;
$coral-blossom-rgb: 247, 190, 162;
$coral-blossom-light: mix(#fff, $coral-blossom, 20%);
$coral-blossom-dark: mix(#000, $coral-blossom, 20%);
.element {
color: $coral-blossom;
box-shadow: 0 0 0 2px rgba($coral-blossom, 0.35);
}