Color con nombre · #37C4FA
Shovel Knight
Shovel Knight es #37C4FA: rgb(55 196 250), hsl(197 95% 60%), oklch(0.77 0.138 229.1). Mira tintes, sombras, armonías, contraste WCAG y APCA, y código CSS, Tailwind v4 y SCSS.
What does Cyan mean? → · Shovel Knight color name →
#37C4FA
oklch(0.77 0.138 229.1)
Conversiones de color
- HEX
- #37c4fa
- RGB
- rgb(55 196 250)
- HSL
- hsl(197 95% 60%)
- HWB
- hwb(197 22% 2%)
- OKLCH
- oklch(0.77 0.138 229.1)
- OKLab
- oklab(0.77 -0.09 -0.104)
- CIE Lab
- lab(73.69 -24.55 -37.96)
- LCH
- lch(73.69 45.21 237.1)
- CMYK
- cmyk(78% 22% 0% 2%)
Tintes · Sombras · Tonos
Tintes
- 57CAFB
- 6FD1FC
- 84D7FD
- 98DDFD
- AAE3FE
- BCE9FE
- CDEEFF
- DEF4FF
- EFFAFF
Sombras
- 2EAAD9
- 2691BA
- 1E789B
- 16617D
- 0F4A61
- 083546
- 03212D
- 010E15
- 000203
Tonos
- 48BDED
- 54B7E1
- 5DB0D5
- 65A9C8
- 6CA2BC
- 719CB0
- 7695A4
- 7A8E98
- 7D878C
Armonías de color
Complementario +180°
- 37C4FA
Shovel Knight
- FA9860
≈ Indian Paintbrush
Análogo -30° +30°
- 37C4FA
Shovel Knight
- 00CDD4
≈ Jade Glass
- 86B5FF
≈ Parakeet Blue
Triádico +120° +240°
- 37C4FA
Shovel Knight
- F58EC2
≈ Bubblegum Beam
- BBBB46
≈ Sinsemilla
Complementario dividido +150° +210°
- 37C4FA
Shovel Knight
- FF8F92
≈ Cherished One
- E3A93D
≈ Tulip Tree
Tetrádico +90° +180° +270°
- 37C4FA
Shovel Knight
- DA97EC
≈ Bright Lilac
- FA9860
≈ Indian Paintbrush
- 85C972
≈ Emerald Rain
Contraste y accesibilidad
Ag
FailSobre blanco
WCAG 2.01:1 · APCA Lc 39
Ag
AAASobre negro
WCAG 10.43:1 · APCA Lc 64
Mejor color de texto: #000000
WCAG 10.43:1 (AAA) · APCA Lc 64
Contrast pairs
Fragmentos de código
CSS
:root {
--shovel-knight: #37c4fa;
--shovel-knight-rgb: 55 196 250;
--shovel-knight-oklch: oklch(0.77 0.138 229.1);
}
.element {
color: var(--shovel-knight);
background-color: hsl(197 95% 60%);
border-color: oklch(0.77 0.138 229.1);
}Tailwind CSS v4
@theme {
--color-shovel-knight: #37c4fa;
--color-shovel-knight-50: #cefdff;
--color-shovel-knight-100: #b9f1ff;
--color-shovel-knight-200: #96e0ff;
--color-shovel-knight-300: #65c4f1;
--color-shovel-knight-400: #22addf;
--color-shovel-knight-500: #0095ce;
--color-shovel-knight-600: #007eae;
--color-shovel-knight-700: #00658c;
--color-shovel-knight-800: #004b67;
--color-shovel-knight-900: #003448;
--color-shovel-knight-950: #001f2f;
}SCSS
$shovel-knight: #37c4fa;
$shovel-knight-rgb: 55, 196, 250;
$shovel-knight-light: mix(#fff, $shovel-knight, 20%);
$shovel-knight-dark: mix(#000, $shovel-knight, 20%);
.element {
color: $shovel-knight;
box-shadow: 0 0 0 2px rgba($shovel-knight, 0.35);
}