Named color · #44CCFF
Thor’s Thunder
Thor’s Thunder is #44CCFF: rgb(68 204 255), hsl(196 100% 63%), oklch(0.794 0.135 227.7). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Cyan mean? → · Thor’s Thunder color name →
#44CCFF
oklch(0.794 0.135 227.7)
Color conversions
- HEX
- #44ccff
- RGB
- rgb(68 204 255)
- HSL
- hsl(196 100% 63%)
- HWB
- hwb(196 27% 0%)
- OKLCH
- oklch(0.794 0.135 227.7)
- OKLab
- oklab(0.794 -0.091 -0.1)
- CIE Lab
- lab(76.46 -25.37 -36.33)
- LCH
- lch(76.46 44.31 235.1)
- CMYK
- cmyk(73% 20% 0% 0%)
Tints · Shades · Tones
Tints
- 60D2FF
- 76D7FF
- 8ADCFF
- 9DE2FF
- AEE7FF
- BFECFF
- D0F1FF
- E0F6FF
- EFFAFF
Shades
- 3AB1DE
- 3097BE
- 267E9E
- 1D6580
- 144E63
- 0C3748
- 05222E
- 020F16
- 000203
Tones
- 51C4F2
- 5BBDE5
- 64B5D8
- 6AAECB
- 70A6BE
- 749FB2
- 7897A5
- 7B8F99
- 7E888C
Color harmonies
Complementary +180°
- 44CCFF
Thor’s Thunder
- FFA170
≈ Day at the Zoo
Analogous -30° +30°
- 44CCFF
Thor’s Thunder
- 05D5DA
≈ Aztec Turquoise
- 91BEFF
≈ Truesky Gloxym
Triadic +120° +240°
- 44CCFF
Thor’s Thunder
- FA97CB
≈ Himalayan Balsam
- C5C251
≈ Anime
Split-complementary +150° +210°
- 44CCFF
Thor’s Thunder
- FF9B9F
≈ Rubber Radish
- EBB04B
≈ Brittlebush
Tetradic +90° +180° +270°
- 44CCFF
Thor’s Thunder
- DF9FF4
≈ Medium Lavender Magenta
- FFA170
≈ Day at the Zoo
- 90D079
≈ Fluorescence
Contrast & accessibility
Ag
FailOn white
WCAG 1.85:1 · APCA Lc 35
Ag
AAAOn black
WCAG 11.32:1 · APCA Lc 68
Best text color: #000000
WCAG 11.32:1 (AAA) · APCA Lc 68
Contrast pairs
Code snippets
CSS
:root {
--thor-s-thunder: #44ccff;
--thor-s-thunder-rgb: 68 204 255;
--thor-s-thunder-oklch: oklch(0.794 0.135 227.7);
}
.element {
color: var(--thor-s-thunder);
background-color: hsl(196 100% 63%);
border-color: oklch(0.794 0.135 227.7);
}Tailwind CSS v4
@theme {
--color-thor-s-thunder: #44ccff;
--color-thor-s-thunder-50: #cffdff;
--color-thor-s-thunder-100: #baf1ff;
--color-thor-s-thunder-200: #96e0ff;
--color-thor-s-thunder-300: #66c4ef;
--color-thor-s-thunder-400: #25addc;
--color-thor-s-thunder-500: #0095cb;
--color-thor-s-thunder-600: #007eab;
--color-thor-s-thunder-700: #00658a;
--color-thor-s-thunder-800: #004b65;
--color-thor-s-thunder-900: #003447;
--color-thor-s-thunder-950: #001f2e;
}SCSS
$thor-s-thunder: #44ccff;
$thor-s-thunder-rgb: 68, 204, 255;
$thor-s-thunder-light: mix(#fff, $thor-s-thunder, 20%);
$thor-s-thunder-dark: mix(#000, $thor-s-thunder, 20%);
.element {
color: $thor-s-thunder;
box-shadow: 0 0 0 2px rgba($thor-s-thunder, 0.35);
}