이름 색상 · #F8CFB4
Butterfly Wing
Butterfly Wing은(는) #F8CFB4: rgb(248 207 180), hsl(24 83% 84%), oklch(0.883 0.059 55.2). 틴트, 셰이드, 색 조화, WCAG·APCA 대비, CSS·Tailwind v4·SCSS 코드를 확인하세요.
What does Orange mean? → · Butterfly Wing color name →
#F8CFB4
oklch(0.883 0.059 55.2)
색상 변환
- 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%)
틴트 · 셰이드 · 톤
틴트
- F9D4BB
- FAD9C3
- FBDDCA
- FBE2D2
- FCE7D9
- FDECE1
- FDF1E8
- FEF5F0
- FFFAF7
셰이드
- D8B49C
- B89985
- 9A7F6E
- 7C6758
- 604F44
- 453830
- 2C231D
- 15100C
- 030202
톤
- ECC7AF
- DFBFAA
- D3B7A4
- C7AF9F
- BBA79A
- AF9F95
- A39790
- 978F8A
- 8B8885
색 조화
보색 +180°
- F8CFB4
Butterfly Wing
- B4DFFA
≈ Arctic Paradise
유사색 -30° +30°
- F8CFB4
Butterfly Wing
- FDCAC5
≈ Hooked Mimosa
- EAD6AD
≈ Rousseau Gold
삼각 배색 +120° +240°
- F8CFB4
Butterfly Wing
- B0E6D6
≈ Ode to Green
- DBD1FC
≈ Pale Lavender
분열 보색 +150° +210°
- F8CFB4
Butterfly Wing
- ABE4EB
≈ Uranus
- C6D9FF
≈ Pale Phthalo Blue
사각 배색 +90° +180° +270°
- F8CFB4
Butterfly Wing
- C1E3C1
≈ Sugar Mint
- B4DFFA
≈ Arctic Paradise
- EDCCEE
≈ Bubblegum Crisis
대비 및 접근성
Ag
Fail흰색 위
WCAG 1.44:1 · APCA Lc 21
Ag
AAA검은색 위
WCAG 14.57:1 · APCA Lc 82
가장 좋은 글자색: #000000
WCAG 14.57:1 (AAA) · APCA Lc 82
Contrast pairs
코드 스니펫
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);
}