Color con nombre más cercano · #6A6C6F
#6A6C6F
Color con nombre más cercano: Beautiful Darkness
#6A6C6F (rgb(106 108 111), hsl(216 2% 43%), oklch(0.531 0.005 258.3)) se parece más al color con nombre Beautiful Darkness. Mira tintes, sombras, armonías, contraste WCAG y APCA, y código CSS, Tailwind v4 y SCSS.
#6A6C6F
oklch(0.531 0.005 258.3)
Conversiones de color
- HEX
- #6a6c6f
- RGB
- rgb(106 108 111)
- HSL
- hsl(216 2% 43%)
- HWB
- hwb(216 42% 56%)
- OKLCH
- oklch(0.531 0.005 258.3)
- OKLab
- oklab(0.531 -0.001 -0.005)
- CIE Lab
- lab(45.53 -0.33 -1.96)
- LCH
- lch(45.53 1.99 260.6)
- CMYK
- cmyk(5% 3% 0% 56%)
Tintes · Sombras · Tonos
Tintes
- 787A7C
- 86878A
- 949698
- A3A4A6
- B2B3B4
- C1C2C3
- D0D1D2
- DFE0E1
- EFEFF0
Sombras
- 5B5D60
- 4D4E51
- 3F4042
- 313234
- 242527
- 18191A
- 0D0D0E
- 040404
- 000001
Tonos
- 6C6E71
- 6E7072
- 717274
- 737476
- 757677
- 777879
- 797A7B
- 7C7C7D
- 7E7E7E
Armonías de color
Complementario +180°
- 6A6C6F
Beautiful Darkness
- 6E6C69
≈ Dove Grey
Análogo -30° +30°
- 6A6C6F
Beautiful Darkness
- 696D6E
≈ Dark Ash
- 6C6B6F
≈ Plum Charcoal
Triádico +120° +240°
- 6A6C6F
Beautiful Darkness
- 6F6B6B
≈ Dove Grey
- 6A6D6A
≈ Shadows
Complementario dividido +150° +210°
- 6A6C6F
Beautiful Darkness
- 6F6B69
≈ Gibraltar Grey
- 6C6C69
≈ Shadows
Tetrádico +90° +180° +270°
- 6A6C6F
Beautiful Darkness
- 6E6B6C
≈ Dove Grey
- 6E6C69
≈ Dove Grey
- 696D6B
≈ Sedona Sage
Contraste y accesibilidad
Ag
AASobre blanco
WCAG 5.26:1 · APCA Lc 76
Ag
FailSobre negro
WCAG 3.98:1 · APCA Lc 26
Mejor color de texto: #FFFFFF
WCAG 5.26:1 (AA) · APCA Lc 76
Contrast pairs
Fragmentos de código
CSS
:root {
--beautiful-darkness: #6a6c6f;
--beautiful-darkness-rgb: 106 108 111;
--beautiful-darkness-oklch: oklch(0.531 0.005 258.3);
}
.element {
color: var(--beautiful-darkness);
background-color: hsl(216 2% 43%);
border-color: oklch(0.531 0.005 258.3);
}Tailwind CSS v4
@theme {
--color-beautiful-darkness: #6a6c6f;
--color-beautiful-darkness-50: #f4f5f7;
--color-beautiful-darkness-100: #e7e8ea;
--color-beautiful-darkness-200: #d3d4d6;
--color-beautiful-darkness-300: #b6b7ba;
--color-beautiful-darkness-400: #9c9ea2;
--color-beautiful-darkness-500: #84868a;
--color-beautiful-darkness-600: #707274;
--color-beautiful-darkness-700: #595b5d;
--color-beautiful-darkness-800: #414244;
--color-beautiful-darkness-900: #2d2e2f;
--color-beautiful-darkness-950: #1a1b1c;
}SCSS
$beautiful-darkness: #6a6c6f;
$beautiful-darkness-rgb: 106, 108, 111;
$beautiful-darkness-light: mix(#fff, $beautiful-darkness, 20%);
$beautiful-darkness-dark: mix(#000, $beautiful-darkness, 20%);
.element {
color: $beautiful-darkness;
box-shadow: 0 0 0 2px rgba($beautiful-darkness, 0.35);
}