Màu có tên gần nhất · #22D3EE
#22D3EE
Màu có tên gần nhất: Vaporwave Blue
#22D3EE (rgb(34 211 238), hsl(188 86% 53%), oklch(0.797 0.134 211.5)) gần nhất với màu có tên Vaporwave Blue. Xem sắc nhạt, sắc đậm, hòa sắc, tương phản WCAG và APCA, cùng mã CSS, Tailwind v4 và SCSS.
#22D3EE
oklch(0.797 0.134 211.5)
Chuyển đổi màu
- HEX
- #22d3ee
- RGB
- rgb(34 211 238)
- HSL
- hsl(188 86% 53%)
- HWB
- hwb(188 13% 7%)
- OKLCH
- oklch(0.797 0.134 211.5)
- OKLab
- oklab(0.797 -0.114 -0.07)
- CIE Lab
- lab(77.42 -36.05 -25.89)
- LCH
- lch(77.42 44.38 215.7)
- CMYK
- cmyk(86% 11% 0% 7%)
Sắc nhạt · Sắc đậm · Sắc xám
Sắc nhạt
- 4FD8F0
- 6BDDF2
- 82E1F4
- 97E6F5
- AAEAF7
- BCEEF9
- CDF3FA
- DEF7FC
- EFFBFE
Sắc đậm
- 1CB7CF
- 169CB1
- 118293
- 0B6977
- 07515C
- 033A42
- 01242A
- 001014
- 000203
Sắc xám
- 3ECBE3
- 4EC2D7
- 5ABACC
- 63B2C1
- 6BA9B6
- 71A1AB
- 7699A0
- 7A9195
- 7D888B
Hòa sắc
Bổ túc +180°
- 22D3EE
Vaporwave Blue
- FFA08E
≈ Tangerine Cream
Tương đồng -30° +30°
- 22D3EE
Vaporwave Blue
- 31D8C2
≈ Turquoise Panic
- 77C6FF
≈ Maya Blue
Bộ ba +120° +240°
- 22D3EE
Vaporwave Blue
- EF9CE4
≈ Diva Mecha
- DCB94A
≈ Credo
Bổ túc chia +150° +210°
- 22D3EE
Vaporwave Blue
- FF9AB7
≈ Saira Red
- FAA85C
≈ Rajah
Bộ bốn +90° +180° +270°
- 22D3EE
Vaporwave Blue
- CBAAFF
≈ Purple Hepatica
- FFA08E
≈ Tangerine Cream
- AFCA63
≈ Green Glow
Tương phản và khả năng tiếp cận
Ag
FailTrên nền trắng
WCAG 1.80:1 · APCA Lc 33
Ag
AAATrên nền đen
WCAG 11.62:1 · APCA Lc 70
Màu chữ tốt nhất: #000000
WCAG 11.62:1 (AAA) · APCA Lc 70
Contrast pairs
Đoạn mã
CSS
:root {
--vaporwave-blue: #22d3ee;
--vaporwave-blue-rgb: 34 211 238;
--vaporwave-blue-oklch: oklch(0.797 0.134 211.5);
}
.element {
color: var(--vaporwave-blue);
background-color: hsl(188 86% 53%);
border-color: oklch(0.797 0.134 211.5);
}Tailwind CSS v4
@theme {
--color-vaporwave-blue: #22d3ee;
--color-vaporwave-blue-50: #caffff;
--color-vaporwave-blue-100: #b4f4ff;
--color-vaporwave-blue-200: #8ee4f7;
--color-vaporwave-blue-300: #57c9e1;
--color-vaporwave-blue-400: #00b3cc;
--color-vaporwave-blue-500: #009bb9;
--color-vaporwave-blue-600: #00849c;
--color-vaporwave-blue-700: #00697d;
--color-vaporwave-blue-800: #004e5b;
--color-vaporwave-blue-900: #003640;
--color-vaporwave-blue-950: #002129;
}SCSS
$vaporwave-blue: #22d3ee;
$vaporwave-blue-rgb: 34, 211, 238;
$vaporwave-blue-light: mix(#fff, $vaporwave-blue, 20%);
$vaporwave-blue-dark: mix(#000, $vaporwave-blue, 20%);
.element {
color: $vaporwave-blue;
box-shadow: 0 0 0 2px rgba($vaporwave-blue, 0.35);
}