Nazwany kolor · #FAE1C7
Orange Sparkle
Orange Sparkle to #FAE1C7: rgb(250 225 199), hsl(31 84% 88%), oklch(0.923 0.044 68.3). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Orange mean? → · Orange Sparkle color name →
#FAE1C7
oklch(0.923 0.044 68.3)
Konwersje koloru
- HEX
- #fae1c7
- RGB
- rgb(250 225 199)
- HSL
- hsl(31 84% 88%)
- HWB
- hwb(31 78% 2%)
- OKLCH
- oklch(0.923 0.044 68.3)
- OKLab
- oklab(0.923 0.016 0.041)
- CIE Lab
- lab(91.1 5.92 16.07)
- LCH
- lch(91.1 17.12 69.8)
- CMYK
- cmyk(0% 10% 20% 2%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- FBE4CD
- FBE7D2
- FCEAD8
- FCEDDD
- FDF0E3
- FDF3E9
- FEF6EE
- FEF9F4
- FFFCF9
Odcienie ciemniejsze
- D9C4AD
- BAA793
- 9B8B7A
- 7D7062
- 61564C
- 463E36
- 2D2721
- 15120E
- 030202
Tony
- EDD7C0
- E1CDB9
- D4C3B1
- C8B9AA
- BBAFA3
- AFA69C
- A39C95
- 97938E
- 8C8987
Harmonie kolorów
Komplementarna +180°
- FAE1C7
Orange Sparkle
- D2E9FF
≈ Veiling Waterfalls
Analogowa -30° +30°
- FAE1C7
Orange Sparkle
- FFDDD3
≈ Soft Orange Bloom
- EDE7C6
≈ Piece of Cake
Triada +120° +240°
- FAE1C7
Orange Sparkle
- C5F0EB
≈ Angel of Death Victorious
- EEDEFD
≈ Lavender Savour
Komplementarna rozszczepiona +150° +210°
- FAE1C7
Orange Sparkle
- C6EEFA
≈ Heaven’s Gate
- DFE4FF
≈ Stoic White
Tetrada +90° +180° +270°
- FAE1C7
Orange Sparkle
- CEEFDB
≈ Light Martian Moon
- D2E9FF
≈ Veiling Waterfalls
- FBDBF0
≈ Rose Glow
Kontrast i dostępność
Ag
FailNa bieli
WCAG 1.26:1 · APCA Lc 13
Ag
AAANa czerni
WCAG 16.65:1 · APCA Lc 91
Najlepszy kolor tekstu: #000000
WCAG 16.65:1 (AAA) · APCA Lc 91
Contrast pairs
Fragmenty kodu
CSS
:root {
--orange-sparkle: #fae1c7;
--orange-sparkle-rgb: 250 225 199;
--orange-sparkle-oklch: oklch(0.923 0.044 68.3);
}
.element {
color: var(--orange-sparkle);
background-color: hsl(31 84% 88%);
border-color: oklch(0.923 0.044 68.3);
}Tailwind CSS v4
@theme {
--color-orange-sparkle: #fae1c7;
--color-orange-sparkle-50: #fef3e8;
--color-orange-sparkle-100: #f2e6d8;
--color-orange-sparkle-200: #e1d1c0;
--color-orange-sparkle-300: #c6b4a0;
--color-orange-sparkle-400: #b09a83;
--color-orange-sparkle-500: #9a8167;
--color-orange-sparkle-600: #826d57;
--color-orange-sparkle-700: #685746;
--color-orange-sparkle-800: #4d4032;
--color-orange-sparkle-900: #362c22;
--color-orange-sparkle-950: #211911;
}SCSS
$orange-sparkle: #fae1c7;
$orange-sparkle-rgb: 250, 225, 199;
$orange-sparkle-light: mix(#fff, $orange-sparkle, 20%);
$orange-sparkle-dark: mix(#000, $orange-sparkle, 20%);
.element {
color: $orange-sparkle;
box-shadow: 0 0 0 2px rgba($orange-sparkle, 0.35);
}