이름 색상 · #FCB057
Duckling
Duckling은(는) #FCB057: rgb(252 176 87), hsl(32 96% 66%), oklch(0.814 0.137 68). 틴트, 셰이드, 색 조화, WCAG·APCA 대비, CSS·Tailwind v4·SCSS 코드를 확인하세요.
What does Orange mean? → · Duckling color name →
#FCB057
oklch(0.814 0.137 68)
색상 변환
- HEX
- #fcb057
- RGB
- rgb(252 176 87)
- HSL
- hsl(32 96% 66%)
- HWB
- hwb(32 34% 1%)
- OKLCH
- oklch(0.814 0.137 68)
- OKLab
- oklab(0.814 0.051 0.127)
- CIE Lab
- lab(78.09 22.57 55.95)
- LCH
- lch(78.09 60.34 68)
- CMYK
- cmyk(0% 30% 65% 1%)
틴트 · 셰이드 · 톤
틴트
- FDB86B
- FEC17E
- FEC98F
- FFD1A0
- FFD8B0
- FFE0C0
- FFE8D0
- FFF0E0
- FFF7EF
셰이드
- DB994B
- BB823E
- 9C6C33
- 7E5627
- 62421C
- 472E12
- 2D1C08
- 160B03
- 030100
톤
- EFAB5E
- E3A764
- D6A26A
- CA9E6E
- BD9972
- B19476
- A58F79
- 988A7C
- 8C857E
색 조화
보색 +180°
- FCB057
Duckling
- 8EC8FF
≈ Clear Sky
유사색 -30° +30°
- FCB057
Duckling
- FFA98F
≈ Frozen Salmon
- DAC24E
≈ Pepperoncini
삼각 배색 +120° +240°
- FCB057
Duckling
- 22DED2
≈ Mint Morning
- D8ACFF
≈ Testosterose
분열 보색 +150° +210°
- FCB057
Duckling
- 31D7FD
≈ Neon Blue
- B3BDFF
≈ Dried Lilac
사각 배색 +90° +180° +270°
대비 및 접근성
Ag
Fail흰색 위
WCAG 1.82:1 · APCA Lc 34
Ag
AAA검은색 위
WCAG 11.48:1 · APCA Lc 69
가장 좋은 글자색: #000000
WCAG 11.48:1 (AAA) · APCA Lc 69
Contrast pairs
코드 스니펫
CSS
:root {
--duckling: #fcb057;
--duckling-rgb: 252 176 87;
--duckling-oklch: oklch(0.814 0.137 68);
}
.element {
color: var(--duckling);
background-color: hsl(32 96% 66%);
border-color: oklch(0.814 0.137 68);
}Tailwind CSS v4
@theme {
--color-duckling: #fcb057;
--color-duckling-50: #ffefcb;
--color-duckling-100: #ffe1b7;
--color-duckling-200: #faca94;
--color-duckling-300: #e4ab66;
--color-duckling-400: #d38d37;
--color-duckling-500: #c07100;
--color-duckling-600: #a26000;
--color-duckling-700: #824d00;
--color-duckling-800: #613700;
--color-duckling-900: #442500;
--color-duckling-950: #2c1300;
}SCSS
$duckling: #fcb057;
$duckling-rgb: 252, 176, 87;
$duckling-light: mix(#fff, $duckling, 20%);
$duckling-dark: mix(#000, $duckling, 20%);
.element {
color: $duckling;
box-shadow: 0 0 0 2px rgba($duckling, 0.35);
}