Nazwany kolor · #F8CFB4
Butterfly Wing
Butterfly Wing to #F8CFB4: rgb(248 207 180), hsl(24 83% 84%), oklch(0.883 0.059 55.2). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Orange mean? → · Butterfly Wing color name →
#F8CFB4
oklch(0.883 0.059 55.2)
Konwersje koloru
- HEX
- #f8cfb4
- RGB
- rgb(248 207 180)
- HSL
- hsl(24 83% 84%)
- HWB
- hwb(24 71% 3%)
- OKLCH
- oklch(0.883 0.059 55.2)
- OKLab
- oklab(0.883 0.034 0.048)
- CIE Lab
- lab(86.2 12.04 19.15)
- LCH
- lch(86.2 22.61 57.8)
- CMYK
- cmyk(0% 17% 27% 3%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- F9D4BB
- FAD9C3
- FBDDCA
- FBE2D2
- FCE7D9
- FDECE1
- FDF1E8
- FEF5F0
- FFFAF7
Odcienie ciemniejsze
- D8B49C
- B89985
- 9A7F6E
- 7C6758
- 604F44
- 453830
- 2C231D
- 15100C
- 030202
Tony
- ECC7AF
- DFBFAA
- D3B7A4
- C7AF9F
- BBA79A
- AF9F95
- A39790
- 978F8A
- 8B8885
Harmonie kolorów
Komplementarna +180°
- F8CFB4
Butterfly Wing
- B4DFFA
≈ Arctic Paradise
Analogowa -30° +30°
- F8CFB4
Butterfly Wing
- FDCAC5
≈ Hooked Mimosa
- EAD6AD
≈ Rousseau Gold
Triada +120° +240°
- F8CFB4
Butterfly Wing
- B0E6D6
≈ Ode to Green
- DBD1FC
≈ Pale Lavender
Komplementarna rozszczepiona +150° +210°
- F8CFB4
Butterfly Wing
- ABE4EB
≈ Uranus
- C6D9FF
≈ Pale Phthalo Blue
Tetrada +90° +180° +270°
- F8CFB4
Butterfly Wing
- C1E3C1
≈ Sugar Mint
- B4DFFA
≈ Arctic Paradise
- EDCCEE
≈ Bubblegum Crisis
Kontrast i dostępność
Ag
FailNa bieli
WCAG 1.44:1 · APCA Lc 21
Ag
AAANa czerni
WCAG 14.57:1 · APCA Lc 82
Najlepszy kolor tekstu: #000000
WCAG 14.57:1 (AAA) · APCA Lc 82
Contrast pairs
Fragmenty kodu
CSS
:root {
--butterfly-wing: #f8cfb4;
--butterfly-wing-rgb: 248 207 180;
--butterfly-wing-oklch: oklch(0.883 0.059 55.2);
}
.element {
color: var(--butterfly-wing);
background-color: hsl(24 83% 84%);
border-color: oklch(0.883 0.059 55.2);
}Tailwind CSS v4
@theme {
--color-butterfly-wing: #f8cfb4;
--color-butterfly-wing-50: #fff1e5;
--color-butterfly-wing-100: #f8e4d5;
--color-butterfly-wing-200: #e9cfbc;
--color-butterfly-wing-300: #cfb09b;
--color-butterfly-wing-400: #ba967d;
--color-butterfly-wing-500: #a57c60;
--color-butterfly-wing-600: #8c6952;
--color-butterfly-wing-700: #705441;
--color-butterfly-wing-800: #533d2f;
--color-butterfly-wing-900: #3a2a20;
--color-butterfly-wing-950: #241710;
}SCSS
$butterfly-wing: #f8cfb4;
$butterfly-wing-rgb: 248, 207, 180;
$butterfly-wing-light: mix(#fff, $butterfly-wing, 20%);
$butterfly-wing-dark: mix(#000, $butterfly-wing, 20%);
.element {
color: $butterfly-wing;
box-shadow: 0 0 0 2px rgba($butterfly-wing, 0.35);
}