Nazwany kolor · #454743
Brattle Spruce
Brattle Spruce to #454743: rgb(69 71 67), hsl(90 3% 27%), oklch(0.395 0.007 128.7). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Gray mean? → · Brattle Spruce color name →
#454743
oklch(0.395 0.007 128.7)
Konwersje koloru
- 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%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- 565754
- 676865
- 787A77
- 8A8C89
- 9D9E9C
- B0B1AF
- C3C4C2
- D7D7D6
- EBEBEA
Odcienie ciemniejsze
- 3B3D39
- 31322F
- 272826
- 1E1F1D
- 151614
- 0C0D0C
- 050605
- 020201
- 000000
Tony
- 4B4C49
- 50524F
- 565755
- 5C5D5B
- 626361
- 686967
- 6E6E6D
- 747473
- 7A7A7A
Harmonie kolorów
Komplementarna +180°
- 454743
Brattle Spruce
- 474549
≈ Black Tie
Analogowa -30° +30°
- 454743
Brattle Spruce
- 474642
≈ Tuatara
- 434745
≈ Brattle Spruce
Triada +120° +240°
- 454743
Brattle Spruce
- 43474A
≈ Little Black Dress
- 4A4545
≈ Dampened Black
Komplementarna rozszczepiona +150° +210°
- 454743
Brattle Spruce
- 45464A
≈ Steel Grey
- 494547
≈ Catwalk
Tetrada +90° +180° +270°
- 454743
Brattle Spruce
- 424749
≈ Little Black Dress
- 474549
≈ Black Tie
- 4A4543
≈ Phantom Mist
Kontrast i dostępność
Ag
AAANa bieli
WCAG 9.39:1 · APCA Lc 92
Ag
FailNa czerni
WCAG 2.23:1 · APCA Lc 11
Najlepszy kolor tekstu: #FFFFFF
WCAG 9.39:1 (AAA) · APCA Lc 92
Contrast pairs
Fragmenty kodu
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);
}