命名颜色 · #44CCFF
Thor’s Thunder
Thor’s Thunder 即 #44CCFF：rgb(68 204 255)、hsl(196 100% 63%)、oklch(0.794 0.135 227.7)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
What does Cyan mean? → · Thor’s Thunder color name →
#44CCFF
oklch(0.794 0.135 227.7)
颜色转换
- 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%)
浅色调 · 深色调 · 灰色调
浅色调
- 60D2FF
- 76D7FF
- 8ADCFF
- 9DE2FF
- AEE7FF
- BFECFF
- D0F1FF
- E0F6FF
- EFFAFF
深色调
- 3AB1DE
- 3097BE
- 267E9E
- 1D6580
- 144E63
- 0C3748
- 05222E
- 020F16
- 000203
灰色调
- 51C4F2
- 5BBDE5
- 64B5D8
- 6AAECB
- 70A6BE
- 749FB2
- 7897A5
- 7B8F99
- 7E888C
配色和谐
互补色 +180°
- 44CCFF
Thor’s Thunder
- FFA170
≈ Day at the Zoo
类似色 -30° +30°
- 44CCFF
Thor’s Thunder
- 05D5DA
≈ Aztec Turquoise
- 91BEFF
≈ Truesky Gloxym
三角配色 +120° +240°
- 44CCFF
Thor’s Thunder
- FA97CB
≈ Himalayan Balsam
- C5C251
≈ Anime
分裂互补色 +150° +210°
- 44CCFF
Thor’s Thunder
- FF9B9F
≈ Rubber Radish
- EBB04B
≈ Brittlebush
四角配色 +90° +180° +270°
- 44CCFF
Thor’s Thunder
- DF9FF4
≈ Medium Lavender Magenta
- FFA170
≈ Day at the Zoo
- 90D079
≈ Fluorescence
对比度与无障碍
Ag
Fail白底
WCAG 1.85:1 · APCA Lc 35
Ag
AAA黑底
WCAG 11.32:1 · APCA Lc 68
最佳文字颜色: #000000
WCAG 11.32:1 (AAA) · APCA Lc 68
Contrast pairs
代码片段
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);
}