이름 색상 · #B79D69

Swamp Fox

Swamp Fox은(는) #B79D69: rgb(183 157 105), hsl(40 35% 56%), oklch(0.707 0.076 84). 틴트, 셰이드, 색 조화, WCAG·APCA 대비, CSS·Tailwind v4·SCSS 코드를 확인하세요.

What does Orange mean? → · Swamp Fox color name →

#B79D69

oklch(0.707 0.076 84)

색상 변환

HEX: #b79d69
RGB: rgb(183 157 105)
HSL: hsl(40 35% 56%)
HWB: hwb(40 41% 28%)
OKLCH: oklch(0.707 0.076 84)
OKLab: oklab(0.707 0.008 0.075)
CIE Lab: lab(66.18 4.63 30.92)
LCH: lch(66.18 31.27 81.5)
CMYK: cmyk(0% 14% 43% 28%)

틴트 · 셰이드 · 톤

틴트

BEA778
C5B087
CCBA96
D4C4A5
DBCDB3
E2D7C2
E9E1D1
F0EBE0
F8F5F0

셰이드

9F885A
87734C
705F3E
5A4C31
453A24
312818
1E180C
0C0904
020100

톤

B19A6C
AC976F
A69471
A19274
9B8F76
968C78
90897B
8B867C
85837E

색 조화

보색 +180°

B79D69
Swamp Fox
89A1D1
≈ Wisteria Blue

유사색 -30° +30°

삼각 배색 +120° +240°

분열 보색 +150° +210°

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

대비 및 접근성

흰색 위

WCAG 2.61:1 · APCA Lc 51

Fail

검은색 위

WCAG 8.04:1 · APCA Lc 51

AAA

가장 좋은 글자색: #000000

WCAG 8.04:1 (AAA) · APCA Lc 51

Contrast pairs

코드 스니펫

CSS

:root {
  --swamp-fox: #b79d69;
  --swamp-fox-rgb: 183 157 105;
  --swamp-fox-oklch: oklch(0.707 0.076 84);
}

.element {
  color: var(--swamp-fox);
  background-color: hsl(40 35% 56%);
  border-color: oklch(0.707 0.076 84);
}

Tailwind CSS v4

@theme {
  --color-swamp-fox: #b79d69;
  --color-swamp-fox-50: #fff4dd;
  --color-swamp-fox-100: #f3e7cc;
  --color-swamp-fox-200: #e3d3b0;
  --color-swamp-fox-300: #c9b58b;
  --color-swamp-fox-400: #b49b6a;
  --color-swamp-fox-500: #9e8248;
  --color-swamp-fox-600: #856e3e;
  --color-swamp-fox-700: #6b5831;
  --color-swamp-fox-800: #4f4022;
  --color-swamp-fox-900: #372c17;
  --color-swamp-fox-950: #221908;
}

SCSS

$swamp-fox: #b79d69;
$swamp-fox-rgb: 183, 157, 105;
$swamp-fox-light: mix(#fff, $swamp-fox, 20%);
$swamp-fox-dark: mix(#000, $swamp-fox, 20%);

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

비슷한 이름 색상

Palettes with similar colors

도구에서 열기

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