Nazwany kolor · #F2C9B1
French Cream
French Cream to #F2C9B1: rgb(242 201 177), hsl(22 71% 82%), oklch(0.865 0.057 52). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Orange mean? → · French Cream color name →
#F2C9B1
oklch(0.865 0.057 52)
Konwersje koloru
- HEX
- #f2c9b1
- RGB
- rgb(242 201 177)
- HSL
- hsl(22 71% 82%)
- HWB
- hwb(22 69% 5%)
- OKLCH
- oklch(0.865 0.057 52)
- OKLab
- oklab(0.865 0.035 0.045)
- CIE Lab
- lab(84.12 12.42 17.76)
- LCH
- lch(84.12 21.67 55)
- CMYK
- cmyk(0% 17% 27% 5%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- F4CEB9
- F5D4C0
- F6D9C8
- F8DFD0
- F9E4D8
- FAE9E0
- FCEFE7
- FDF4EF
- FEFAF7
Odcienie ciemniejsze
- D2AE99
- B49583
- 967C6C
- 796457
- 5E4C42
- 43362F
- 2B221C
- 140F0C
- 030201
Tony
- E6C2AC
- DABAA7
- CFB3A2
- C3AB9D
- B8A498
- AC9D94
- A1958F
- 968E8A
- 8B8785
Harmonie kolorów
Komplementarna +180°
- F2C9B1
French Cream
- AEDAF2
≈ Endless Horizon
Analogowa -30° +30°
- F2C9B1
French Cream
- F6C5C2
≈ English Rose
- E6D0A9
≈ Durian White
Triada +120° +240°
- F2C9B1
French Cream
- ADDFCE
≈ Brook Green
- D3CDF6
≈ Miami White
Komplementarna rozszczepiona +150° +210°
- F2C9B1
French Cream
- A7DEE3
≈ Blue Bauble
- BFD4F9
≈ Mr. Glass
Tetrada +90° +180° +270°
- F2C9B1
French Cream
- BEDDBA
≈ Soft Lumen
- AEDAF2
≈ Endless Horizon
- E5C7E9
≈ Prom Corsage
Kontrast i dostępność
Ag
FailNa bieli
WCAG 1.52:1 · APCA Lc 24
Ag
AAANa czerni
WCAG 13.76:1 · APCA Lc 79
Najlepszy kolor tekstu: #000000
WCAG 13.76:1 (AAA) · APCA Lc 79
Contrast pairs
Fragmenty kodu
CSS
:root {
--french-cream: #f2c9b1;
--french-cream-rgb: 242 201 177;
--french-cream-oklch: oklch(0.865 0.057 52);
}
.element {
color: var(--french-cream);
background-color: hsl(22 71% 82%);
border-color: oklch(0.865 0.057 52);
}Tailwind CSS v4
@theme {
--color-french-cream: #f2c9b1;
--color-french-cream-50: #fff1e6;
--color-french-cream-100: #f8e3d7;
--color-french-cream-200: #e9cebe;
--color-french-cream-300: #cfb09d;
--color-french-cream-400: #ba9680;
--color-french-cream-500: #a57c63;
--color-french-cream-600: #8b6954;
--color-french-cream-700: #705443;
--color-french-cream-800: #533d31;
--color-french-cream-900: #3a2a21;
--color-french-cream-950: #241710;
}SCSS
$french-cream: #f2c9b1;
$french-cream-rgb: 242, 201, 177;
$french-cream-light: mix(#fff, $french-cream, 20%);
$french-cream-dark: mix(#000, $french-cream, 20%);
.element {
color: $french-cream;
box-shadow: 0 0 0 2px rgba($french-cream, 0.35);
}