Benoemde kleur · #37C4FA
Shovel Knight
Shovel Knight is #37C4FA: rgb(55 196 250), hsl(197 95% 60%), oklch(0.77 0.138 229.1). Bekijk tinten, schaduwen, harmonieën, WCAG- en APCA-contrast en CSS-, Tailwind v4- en SCSS-code.
What does Cyan mean? → · Shovel Knight color name →
#37C4FA
oklch(0.77 0.138 229.1)
Kleurconversies
- 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%)
Tinten · Schaduwen · Tonen
Tinten
- 57CAFB
- 6FD1FC
- 84D7FD
- 98DDFD
- AAE3FE
- BCE9FE
- CDEEFF
- DEF4FF
- EFFAFF
Schaduwen
- 2EAAD9
- 2691BA
- 1E789B
- 16617D
- 0F4A61
- 083546
- 03212D
- 010E15
- 000203
Tonen
- 48BDED
- 54B7E1
- 5DB0D5
- 65A9C8
- 6CA2BC
- 719CB0
- 7695A4
- 7A8E98
- 7D878C
Kleurharmonieën
Complementair +180°
- 37C4FA
Shovel Knight
- FA9860
≈ Indian Paintbrush
Analoog -30° +30°
- 37C4FA
Shovel Knight
- 00CDD4
≈ Jade Glass
- 86B5FF
≈ Parakeet Blue
Triadisch +120° +240°
- 37C4FA
Shovel Knight
- F58EC2
≈ Bubblegum Beam
- BBBB46
≈ Sinsemilla
Gesplitst complementair +150° +210°
- 37C4FA
Shovel Knight
- FF8F92
≈ Cherished One
- E3A93D
≈ Tulip Tree
Tetradisch +90° +180° +270°
- 37C4FA
Shovel Knight
- DA97EC
≈ Bright Lilac
- FA9860
≈ Indian Paintbrush
- 85C972
≈ Emerald Rain
Contrast en toegankelijkheid
Ag
FailOp wit
WCAG 2.01:1 · APCA Lc 39
Ag
AAAOp zwart
WCAG 10.43:1 · APCA Lc 64
Beste tekstkleur: #000000
WCAG 10.43:1 (AAA) · APCA Lc 64
Contrast pairs
Codefragmenten
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);
}