Couleur nommée · #F64A8A
French Rose
French Rose correspond à #F64A8A : rgb(246 74 138), hsl(338 91% 63%), oklch(0.669 0.213 2.2). Teintes, ombres, harmonies, contraste WCAG et APCA, et code CSS, Tailwind v4 et SCSS.
What does Red mean? → · French Rose color name →
#F64A8A
oklch(0.669 0.213 2.2)
Conversions de couleur
- HEX
- #f64a8a
- RGB
- rgb(246 74 138)
- HSL
- hsl(338 91% 63%)
- HWB
- hwb(338 29% 4%)
- OKLCH
- oklch(0.669 0.213 2.2)
- OKLab
- oklab(0.669 0.212 0.008)
- CIE Lab
- lab(58.93 69 4.29)
- LCH
- lch(58.93 69.13 3.6)
- CMYK
- cmyk(0% 70% 44% 4%)
Teintes · Ombres · Tons
Teintes
- FA6195
- FD75A0
- FF88AC
- FF9AB7
- FFABC3
- FFBCCF
- FFCDDB
- FFDEE7
- FFEFF3
Ombres
- D63F77
- B73565
- 982A53
- 7B2042
- 5F1732
- 450E22
- 2C0614
- 150207
- 030001
Tons
- EB5489
- E15C88
- D66387
- CB6986
- BF6E85
- B47284
- A87683
- 9B7A82
- 8E7D81
Harmonies de couleurs
Complémentaire +180°
- F64A8A
French Rose
- 00AC9B
≈ Pool Green
Analogue -30° +30°
- F64A8A
French Rose
- DC57CD
≈ Fuchsia Flash
- FC5033
≈ Flame Angelfish
Triadique +120° +240°
- F64A8A
French Rose
- 84A300
≈ Noxious
- 009DED
≈ Out of the Blue
Complémentaire divisée +150° +210°
- F64A8A
French Rose
- 00B25C
≈ Future Hair
- 00A7BF
≈ Maui
Tétradique +90° +180° +270°
- F64A8A
French Rose
- B39100
≈ Faint Gold
- 00AC9B
≈ Pool Green
- 7189FF
≈ Punch Out Glove
Contraste et accessibilité
Ag
FailSur blanc
WCAG 3.35:1 · APCA Lc 60
Ag
AASur noir
WCAG 6.26:1 · APCA Lc 42
Meilleure couleur de texte: #000000
WCAG 6.26:1 (AA) · APCA Lc 42
Contrast pairs
Extraits de code
CSS
:root {
--french-rose: #f64a8a;
--french-rose-rgb: 246 74 138;
--french-rose-oklch: oklch(0.669 0.213 2.2);
}
.element {
color: var(--french-rose);
background-color: hsl(338 91% 63%);
border-color: oklch(0.669 0.213 2.2);
}Tailwind CSS v4
@theme {
--color-french-rose: #f64a8a;
--color-french-rose-50: #ffdcee;
--color-french-rose-100: #ffcadf;
--color-french-rose-200: #ffacc9;
--color-french-rose-300: #ff84aa;
--color-french-rose-400: #fd5b94;
--color-french-rose-500: #ec237b;
--color-french-rose-600: #c72368;
--color-french-rose-700: #a01c53;
--color-french-rose-800: #77123f;
--color-french-rose-900: #540c2b;
--color-french-rose-950: #380019;
}SCSS
$french-rose: #f64a8a;
$french-rose-rgb: 246, 74, 138;
$french-rose-light: mix(#fff, $french-rose, 20%);
$french-rose-dark: mix(#000, $french-rose, 20%);
.element {
color: $french-rose;
box-shadow: 0 0 0 2px rgba($french-rose, 0.35);
}