Colore con nome · #51574F
Sunken Battleship
Sunken Battleship è #51574F: rgb(81 87 79), hsl(105 5% 33%), oklch(0.449 0.015 137.8). Scopri tinte, ombre, armonie, contrasto WCAG e APCA e codice CSS, Tailwind v4 e SCSS.
What does Gray mean? → · Sunken Battleship color name →
#51574F
oklch(0.449 0.015 137.8)
Conversioni di colore
- HEX
- #51574f
- RGB
- rgb(81 87 79)
- HSL
- hsl(105 5% 33%)
- HWB
- hwb(105 31% 66%)
- OKLCH
- oklch(0.449 0.015 137.8)
- OKLab
- oklab(0.449 -0.011 0.01)
- CIE Lab
- lab(36.25 -3.75 3.81)
- LCH
- lch(36.25 5.35 134.6)
- CMYK
- cmyk(7% 0% 9% 66%)
Tinte · Ombre · Toni
Tinte
- 61665F
- 71766F
- 818680
- 929691
- A4A7A3
- B5B8B4
- C7C9C7
- DADBD9
- ECEDEC
Ombre
- 454B44
- 3A3E38
- 2F332E
- 242723
- 1A1C19
- 101210
- 070807
- 020302
- 000000
Toni
- 565B54
- 5A5F58
- 5F635D
- 636762
- 686B67
- 6D6F6C
- 727371
- 767876
- 7B7C7B
Armonie di colore
Complementare +180°
- 51574F
Sunken Battleship
- 58525A
≈ Forged Iron
Analogo -30° +30°
- 51574F
Sunken Battleship
- 55564C
≈ Shell Brown
- 4D5853
≈ Black Spruce
Triadico +120° +240°
- 51574F
Sunken Battleship
- 50555D
≈ Coal Tipple
- 5D5252
≈ Sophisticated Plum
Complementare divisa +150° +210°
- 51574F
Sunken Battleship
- 54545D
≈ Coal Tipple
- 5C5256
≈ Sophisticated Plum
Tetradico +90° +180° +270°
- 51574F
Sunken Battleship
- 4D575C
≈ Submarine Grey
- 58525A
≈ Forged Iron
- 5C534E
≈ Gardener’s Soil
Contrasto e accessibilità
Ag
AAASu bianco
WCAG 7.43:1 · APCA Lc 86
Ag
FailSu nero
WCAG 2.82:1 · APCA Lc 16
Miglior colore del testo: #FFFFFF
WCAG 7.43:1 (AAA) · APCA Lc 86
Contrast pairs
Frammenti di codice
CSS
:root {
--sunken-battleship: #51574f;
--sunken-battleship-rgb: 81 87 79;
--sunken-battleship-oklch: oklch(0.449 0.015 137.8);
}
.element {
color: var(--sunken-battleship);
background-color: hsl(105 5% 33%);
border-color: oklch(0.449 0.015 137.8);
}Tailwind CSS v4
@theme {
--color-sunken-battleship: #51574f;
--color-sunken-battleship-50: #f3f6f2;
--color-sunken-battleship-100: #e5e9e4;
--color-sunken-battleship-200: #d1d6d0;
--color-sunken-battleship-300: #b3b9b2;
--color-sunken-battleship-400: #9aa198;
--color-sunken-battleship-500: #81897f;
--color-sunken-battleship-600: #6e746c;
--color-sunken-battleship-700: #585c56;
--color-sunken-battleship-800: #40443e;
--color-sunken-battleship-900: #2c2f2b;
--color-sunken-battleship-950: #191b18;
}SCSS
$sunken-battleship: #51574f;
$sunken-battleship-rgb: 81, 87, 79;
$sunken-battleship-light: mix(#fff, $sunken-battleship, 20%);
$sunken-battleship-dark: mix(#000, $sunken-battleship, 20%);
.element {
color: $sunken-battleship;
box-shadow: 0 0 0 2px rgba($sunken-battleship, 0.35);
}