Nazwany kolor · #F2D5B0
Inviting Ivory
Inviting Ivory to #F2D5B0: rgb(242 213 176), hsl(34 72% 82%), oklch(0.888 0.059 73.7). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Orange mean? → · Inviting Ivory color name →
#F2D5B0
oklch(0.888 0.059 73.7)
Konwersje koloru
- HEX
- #f2d5b0
- RGB
- rgb(242 213 176)
- HSL
- hsl(34 72% 82%)
- HWB
- hwb(34 69% 5%)
- OKLCH
- oklch(0.888 0.059 73.7)
- OKLab
- oklab(0.888 0.016 0.056)
- CIE Lab
- lab(87.04 6.42 22.26)
- LCH
- lch(87.04 23.17 73.9)
- CMYK
- cmyk(0% 12% 27% 5%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- F3D9B8
- F5DDC0
- F6E2C8
- F7E6D0
- F9EAD8
- FAEEDF
- FBF2E7
- FDF7EF
- FEFBF7
Odcienie ciemniejsze
- D2B999
- B49E82
- 96836C
- 796A56
- 5E5142
- 433A2E
- 2B241C
- 14100B
- 030201
Tony
- E6CCAB
- DAC3A7
- CFBBA2
- C3B29D
- B8AA98
- ACA193
- A1998F
- 96908A
- 8B8885
Harmonie kolorów
Komplementarna +180°
- F2D5B0
Inviting Ivory
- C1DDFF
≈ Broad Daylight
Analogowa -30° +30°
- F2D5B0
Inviting Ivory
- FDCFBB
≈ Ibis Pink
- E0DDB0
≈ Modern Zen
Triada +120° +240°
- F2D5B0
Inviting Ivory
- ADE7E5
≈ Cool Crayon
- E8CFF6
≈ Mousse aux Pruneaux
Komplementarna rozszczepiona +150° +210°
- F2D5B0
Inviting Ivory
- B1E3F7
≈ Azure Sky
- D5D6FF
≈ Pale Phthalo Blue
Tetrada +90° +180° +270°
- F2D5B0
Inviting Ivory
- B8E7D0
≈ Woolly Mint
- C1DDFF
≈ Broad Daylight
- F7CBE4
≈ Sparkling Pink
Kontrast i dostępność
Ag
FailNa bieli
WCAG 1.40:1 · APCA Lc 20
Ag
AAANa czerni
WCAG 14.92:1 · APCA Lc 84
Najlepszy kolor tekstu: #000000
WCAG 14.92:1 (AAA) · APCA Lc 84
Contrast pairs
Fragmenty kodu
CSS
:root {
--inviting-ivory: #f2d5b0;
--inviting-ivory-rgb: 242 213 176;
--inviting-ivory-oklch: oklch(0.888 0.059 73.7);
}
.element {
color: var(--inviting-ivory);
background-color: hsl(34 72% 82%);
border-color: oklch(0.888 0.059 73.7);
}Tailwind CSS v4
@theme {
--color-inviting-ivory: #f2d5b0;
--color-inviting-ivory-50: #fff3e3;
--color-inviting-ivory-100: #f4e6d3;
--color-inviting-ivory-200: #e3d1b9;
--color-inviting-ivory-300: #c9b497;
--color-inviting-ivory-400: #b49a78;
--color-inviting-ivory-500: #9e815a;
--color-inviting-ivory-600: #856d4d;
--color-inviting-ivory-700: #6b573d;
--color-inviting-ivory-800: #4f3f2c;
--color-inviting-ivory-900: #372b1d;
--color-inviting-ivory-950: #22190d;
}SCSS
$inviting-ivory: #f2d5b0;
$inviting-ivory-rgb: 242, 213, 176;
$inviting-ivory-light: mix(#fff, $inviting-ivory, 20%);
$inviting-ivory-dark: mix(#000, $inviting-ivory, 20%);
.element {
color: $inviting-ivory;
box-shadow: 0 0 0 2px rgba($inviting-ivory, 0.35);
}