Nazwany kolor · #F2D7B0
Cream Custard
Cream Custard to #F2D7B0: rgb(242 215 176), hsl(35 72% 82%), oklch(0.892 0.059 76.9). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Orange mean? → · Cream Custard color name →
#F2D7B0
oklch(0.892 0.059 76.9)
Konwersje koloru
- HEX
- #f2d7b0
- RGB
- rgb(242 215 176)
- HSL
- hsl(35 72% 82%)
- HWB
- hwb(35 69% 5%)
- OKLCH
- oklch(0.892 0.059 76.9)
- OKLab
- oklab(0.892 0.013 0.058)
- CIE Lab
- lab(87.54 5.44 22.93)
- LCH
- lch(87.54 23.57 76.6)
- CMYK
- cmyk(0% 11% 27% 5%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- F3DBB8
- F5DFC0
- F6E3C8
- F7E7D0
- F9EBD8
- FAEFE0
- FBF3E7
- FDF7EF
- FEFBF7
Odcienie ciemniejsze
- D2BB99
- B49F82
- 96856C
- 796B56
- 5E5242
- 433B2E
- 2B251C
- 14110B
- 030201
Tony
- E6CEAB
- DAC5A7
- CFBCA2
- C3B39D
- B8AB98
- ACA293
- A1998F
- 96918A
- 8B8885
Harmonie kolorów
Komplementarna +180°
- F2D7B0
Cream Custard
- C5DDFF
≈ Arc Light
Analogowa -30° +30°
- F2D7B0
Cream Custard
- FED0BA
≈ Vienna Sausage
- DFDFB2
≈ Modern Zen
Triada +120° +240°
- F2D7B0
Cream Custard
- AEE8E9
≈ Spearmint Water
- ECD0F6
≈ Mousse aux Pruneaux
Komplementarna rozszczepiona +150° +210°
- F2D7B0
Cream Custard
- B3E4FA
≈ Frozen Landscape
- D8D7FF
≈ Icy Plains
Tetrada +90° +180° +270°
- F2D7B0
Cream Custard
- B7E9D3
≈ Mediterranean Mist
- C5DDFF
≈ Arc Light
- FACCE3
≈ Classic Rose
Kontrast i dostępność
Ag
FailNa bieli
WCAG 1.38:1 · APCA Lc 19
Ag
AAANa czerni
WCAG 15.12:1 · APCA Lc 85
Najlepszy kolor tekstu: #000000
WCAG 15.12:1 (AAA) · APCA Lc 85
Contrast pairs
Fragmenty kodu
CSS
:root {
--cream-custard: #f2d7b0;
--cream-custard-rgb: 242 215 176;
--cream-custard-oklch: oklch(0.892 0.059 76.9);
}
.element {
color: var(--cream-custard);
background-color: hsl(35 72% 82%);
border-color: oklch(0.892 0.059 76.9);
}Tailwind CSS v4
@theme {
--color-cream-custard: #f2d7b0;
--color-cream-custard-50: #fff4e3;
--color-cream-custard-100: #f3e6d2;
--color-cream-custard-200: #e2d2b8;
--color-cream-custard-300: #c8b496;
--color-cream-custard-400: #b39a77;
--color-cream-custard-500: #9d8159;
--color-cream-custard-600: #846e4c;
--color-cream-custard-700: #6a583c;
--color-cream-custard-800: #4f402b;
--color-cream-custard-900: #372c1d;
--color-cream-custard-950: #22190d;
}SCSS
$cream-custard: #f2d7b0;
$cream-custard-rgb: 242, 215, 176;
$cream-custard-light: mix(#fff, $cream-custard, 20%);
$cream-custard-dark: mix(#000, $cream-custard, 20%);
.element {
color: $cream-custard;
box-shadow: 0 0 0 2px rgba($cream-custard, 0.35);
}