لون مسمّى · #51574F
Sunken Battleship
Sunken Battleship هو #51574F: rgb(81 87 79)، hsl(105 5% 33%)، oklch(0.449 0.015 137.8). شاهد الدرجات الفاتحة والداكنة والتناسقات وتباين WCAG وAPCA وأكواد CSS وTailwind v4 وSCSS.
What does Gray mean? → · Sunken Battleship color name →
#51574F
oklch(0.449 0.015 137.8)
تحويلات الألوان
- 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%)
درجات فاتحة · درجات داكنة · درجات رمادية
درجات فاتحة
- 61665F
- 71766F
- 818680
- 929691
- A4A7A3
- B5B8B4
- C7C9C7
- DADBD9
- ECEDEC
درجات داكنة
- 454B44
- 3A3E38
- 2F332E
- 242723
- 1A1C19
- 101210
- 070807
- 020302
- 000000
درجات رمادية
- 565B54
- 5A5F58
- 5F635D
- 636762
- 686B67
- 6D6F6C
- 727371
- 767876
- 7B7C7B
تناسق الألوان
متمم +180°
- 51574F
Sunken Battleship
- 58525A
≈ Forged Iron
متجاور -30° +30°
- 51574F
Sunken Battleship
- 55564C
≈ Shell Brown
- 4D5853
≈ Black Spruce
ثلاثي +120° +240°
- 51574F
Sunken Battleship
- 50555D
≈ Coal Tipple
- 5D5252
≈ Sophisticated Plum
متمم منقسم +150° +210°
- 51574F
Sunken Battleship
- 54545D
≈ Coal Tipple
- 5C5256
≈ Sophisticated Plum
رباعي +90° +180° +270°
- 51574F
Sunken Battleship
- 4D575C
≈ Submarine Grey
- 58525A
≈ Forged Iron
- 5C534E
≈ Gardener’s Soil
التباين وإمكانية الوصول
Ag
AAAعلى الأبيض
WCAG 7.43:1 · APCA Lc 86
Ag
Failعلى الأسود
WCAG 2.82:1 · APCA Lc 16
أفضل لون للنص: #FFFFFF
WCAG 7.43:1 (AAA) · APCA Lc 86
Contrast pairs
مقتطفات الأكواد
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);
}