이름 색상 · #FFB118

Golden Treasure

Golden Treasure은(는) #FFB118: rgb(255 177 24), hsl(40 100% 55%), oklch(0.815 0.167 76.1). 틴트, 셰이드, 색 조화, WCAG·APCA 대비, CSS·Tailwind v4·SCSS 코드를 확인하세요.

What does Orange mean? → · Golden Treasure color name →

#FFB118

oklch(0.815 0.167 76.1)

색상 변환

HEX: #ffb118
RGB: rgb(255 177 24)
HSL: hsl(40 100% 55%)
HWB: hwb(40 9% 0%)
OKLCH: oklch(0.815 0.167 76.1)
OKLab: oklab(0.815 0.04 0.162)
CIE Lab: lab(78.36 21.73 77.78)
LCH: lch(78.36 80.76 74.4)
CMYK: cmyk(0% 31% 91% 0%)

틴트 · 셰이드 · 톤

틴트

FFB945
FFC261
FFCA79
FFD28E
FFDAA2
FFE1B5
FFE9C8
FFF0DB
FFF8ED

셰이드

DE9913
BE830F
9E6C0A
805707
634204
482F02
2E1C01
160C00
030100

톤

F2AD35
E5A845
D8A352
CB9F5C
BF9A64
B2956B
A69071
998B77
8C857C

색 조화

보색 +180°

FFB118
Golden Treasure
9AC5FF
≈ Pastel Blue

유사색 -30° +30°

삼각 배색 +120° +240°

분열 보색 +150° +210°

사각 배색 +90° +180° +270°

대비 및 접근성

흰색 위

WCAG 1.81:1 · APCA Lc 34

Fail

검은색 위

WCAG 11.55:1 · APCA Lc 69

AAA

가장 좋은 글자색: #000000

WCAG 11.55:1 (AAA) · APCA Lc 69

Contrast pairs

코드 스니펫

CSS

:root {
  --golden-treasure: #ffb118;
  --golden-treasure-rgb: 255 177 24;
  --golden-treasure-oklch: oklch(0.815 0.167 76.1);
}

.element {
  color: var(--golden-treasure);
  background-color: hsl(40 100% 55%);
  border-color: oklch(0.815 0.167 76.1);
}

Tailwind CSS v4

@theme {
  --color-golden-treasure: #ffb118;
  --color-golden-treasure-50: #fff0c0;
  --color-golden-treasure-100: #ffe2a9;
  --color-golden-treasure-200: #fccc80;
  --color-golden-treasure-300: #e6ac47;
  --color-golden-treasure-400: #d58e00;
  --color-golden-treasure-500: #c37000;
  --color-golden-treasure-600: #a46000;
  --color-golden-treasure-700: #844c00;
  --color-golden-treasure-800: #633600;
  --color-golden-treasure-900: #462500;
  --color-golden-treasure-950: #2d1300;
}

SCSS

$golden-treasure: #ffb118;
$golden-treasure-rgb: 255, 177, 24;
$golden-treasure-light: mix(#fff, $golden-treasure, 20%);
$golden-treasure-dark: mix(#000, $golden-treasure, 20%);

.element {
  color: $golden-treasure;
  box-shadow: 0 0 0 2px rgba($golden-treasure, 0.35);
}

비슷한 이름 색상

Palettes with similar colors

도구에서 열기

피커 조합 대비 검사기 Studio JSON API