命名颜色 · #53C2C3
Gem Turquoise
Gem Turquoise 即 #53C2C3：rgb(83 194 195)、hsl(181 48% 55%)、oklch(0.751 0.1 196)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
What does Teal mean? → · Gem Turquoise color name →
#53C2C3
oklch(0.751 0.1 196)
颜色转换
- HEX
- #53c2c3
- RGB
- rgb(83 194 195)
- HSL
- hsl(181 48% 55%)
- HWB
- hwb(181 33% 24%)
- OKLCH
- oklch(0.751 0.1 196)
- OKLab
- oklab(0.751 -0.096 -0.028)
- CIE Lab
- lab(72.17 -32.58 -10.58)
- LCH
- lch(72.17 34.25 198)
- CMYK
- cmyk(57% 1% 0% 24%)
浅色调 · 深色调 · 灰色调
浅色调
- 69C8C9
- 7CCECF
- 8ED5D5
- A0DBDB
- B0E1E1
- C0E7E7
- D0EDED
- E0F3F3
- F0F9F9
深色调
- 47A8A9
- 3B8F90
- 307778
- 256060
- 1B494A
- 113434
- 082020
- 020E0E
- 000202
灰色调
- 5CBBBC
- 63B5B5
- 69AEAE
- 6EA8A8
- 72A1A1
- 769A9A
- 799494
- 7C8D8D
- 7E8787
配色和谐
互补色 +180°
- 53C2C3
Gem Turquoise
- E79498
≈ Marker Pink
类似色 -30° +30°
- 53C2C3
Gem Turquoise
- 6AC3A0
≈ Gem Silica
- 61BBDF
≈ Clear Weather
三角配色 +120° +240°
- 53C2C3
Gem Turquoise
- C79BD9
≈ Mauve Mist
- D3A662
≈ Burnside
分裂互补色 +150° +210°
- 53C2C3
Gem Turquoise
- DD94BC
≈ Firm Pink
- E39A77
≈ Trumpet Flower
四角配色 +90° +180° +270°
- 53C2C3
Gem Turquoise
- A9A5EB
≈ Maximum Blue Purple
- E79498
≈ Marker Pink
- B6B264
≈ Summer Moss
对比度与无障碍
Ag
Fail白底
WCAG 2.12:1 · APCA Lc 41
Ag
AAA黑底
WCAG 9.87:1 · APCA Lc 61
最佳文字颜色: #000000
WCAG 9.87:1 (AAA) · APCA Lc 61
Contrast pairs
代码片段
CSS
:root {
--gem-turquoise: #53c2c3;
--gem-turquoise-rgb: 83 194 195;
--gem-turquoise-oklch: oklch(0.751 0.1 196);
}
.element {
color: var(--gem-turquoise);
background-color: hsl(181 48% 55%);
border-color: oklch(0.751 0.1 196);
}Tailwind CSS v4
@theme {
--color-gem-turquoise: #53c2c3;
--color-gem-turquoise-50: #d5ffff;
--color-gem-turquoise-100: #c2f3f4;
--color-gem-turquoise-200: #a1e2e4;
--color-gem-turquoise-300: #76c8ca;
--color-gem-turquoise-400: #48b1b2;
--color-gem-turquoise-500: #009a9c;
--color-gem-turquoise-600: #008284;
--color-gem-turquoise-700: #00686a;
--color-gem-turquoise-800: #004d4c;
--color-gem-turquoise-900: #023635;
--color-gem-turquoise-950: #002120;
}SCSS
$gem-turquoise: #53c2c3;
$gem-turquoise-rgb: 83, 194, 195;
$gem-turquoise-light: mix(#fff, $gem-turquoise, 20%);
$gem-turquoise-dark: mix(#000, $gem-turquoise, 20%);
.element {
color: $gem-turquoise;
box-shadow: 0 0 0 2px rgba($gem-turquoise, 0.35);
}