이름 색상 · #454743
Brattle Spruce
Brattle Spruce은(는) #454743: rgb(69 71 67), hsl(90 3% 27%), oklch(0.395 0.007 128.7). 틴트, 셰이드, 색 조화, WCAG·APCA 대비, CSS·Tailwind v4·SCSS 코드를 확인하세요.
What does Gray mean? → · Brattle Spruce color name →
#454743
oklch(0.395 0.007 128.7)
색상 변환
- HEX
- #454743
- RGB
- rgb(69 71 67)
- HSL
- hsl(90 3% 27%)
- HWB
- hwb(90 26% 72%)
- OKLCH
- oklch(0.395 0.007 128.7)
- OKLab
- oklab(0.395 -0.004 0.006)
- CIE Lab
- lab(29.87 -1.51 2.11)
- LCH
- lch(29.87 2.6 125.6)
- CMYK
- cmyk(3% 0% 6% 72%)
틴트 · 셰이드 · 톤
틴트
- 565754
- 676865
- 787A77
- 8A8C89
- 9D9E9C
- B0B1AF
- C3C4C2
- D7D7D6
- EBEBEA
셰이드
- 3B3D39
- 31322F
- 272826
- 1E1F1D
- 151614
- 0C0D0C
- 050605
- 020201
- 000000
톤
- 4B4C49
- 50524F
- 565755
- 5C5D5B
- 626361
- 686967
- 6E6E6D
- 747473
- 7A7A7A
색 조화
보색 +180°
- 454743
Brattle Spruce
- 474549
≈ Black Tie
유사색 -30° +30°
- 454743
Brattle Spruce
- 474642
≈ Tuatara
- 434745
≈ Brattle Spruce
삼각 배색 +120° +240°
- 454743
Brattle Spruce
- 43474A
≈ Little Black Dress
- 4A4545
≈ Dampened Black
분열 보색 +150° +210°
- 454743
Brattle Spruce
- 45464A
≈ Steel Grey
- 494547
≈ Catwalk
사각 배색 +90° +180° +270°
- 454743
Brattle Spruce
- 424749
≈ Little Black Dress
- 474549
≈ Black Tie
- 4A4543
≈ Phantom Mist
대비 및 접근성
Ag
AAA흰색 위
WCAG 9.39:1 · APCA Lc 92
Ag
Fail검은색 위
WCAG 2.23:1 · APCA Lc 11
가장 좋은 글자색: #FFFFFF
WCAG 9.39:1 (AAA) · APCA Lc 92
Contrast pairs
코드 스니펫
CSS
:root {
--brattle-spruce: #454743;
--brattle-spruce-rgb: 69 71 67;
--brattle-spruce-oklch: oklch(0.395 0.007 128.7);
}
.element {
color: var(--brattle-spruce);
background-color: hsl(90 3% 27%);
border-color: oklch(0.395 0.007 128.7);
}Tailwind CSS v4
@theme {
--color-brattle-spruce: #454743;
--color-brattle-spruce-50: #f4f5f3;
--color-brattle-spruce-100: #e7e8e6;
--color-brattle-spruce-200: #d3d5d2;
--color-brattle-spruce-300: #b6b8b4;
--color-brattle-spruce-400: #9d9f9b;
--color-brattle-spruce-500: #858782;
--color-brattle-spruce-600: #70726e;
--color-brattle-spruce-700: #5a5b58;
--color-brattle-spruce-800: #424340;
--color-brattle-spruce-900: #2d2e2c;
--color-brattle-spruce-950: #1a1b19;
}SCSS
$brattle-spruce: #454743;
$brattle-spruce-rgb: 69, 71, 67;
$brattle-spruce-light: mix(#fff, $brattle-spruce, 20%);
$brattle-spruce-dark: mix(#000, $brattle-spruce, 20%);
.element {
color: $brattle-spruce;
box-shadow: 0 0 0 2px rgba($brattle-spruce, 0.35);
}