命名颜色 · #00A094
Alhambra
Alhambra 即 #00A094：rgb(0 160 148)、hsl(176 100% 31%)、oklch(0.635 0.112 185.5)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
What does Teal mean? → · Alhambra color name →
#00A094
oklch(0.635 0.112 185.5)
颜色转换
- HEX
- #00a094
- RGB
- rgb(0 160 148)
- HSL
- hsl(176 100% 31%)
- HWB
- hwb(176 0% 37%)
- OKLCH
- oklch(0.635 0.112 185.5)
- OKLab
- oklab(0.635 -0.111 -0.011)
- CIE Lab
- lab(58.97 -38.58 -4.28)
- LCH
- lch(58.97 38.82 186.3)
- CMYK
- cmyk(100% 0% 7% 37%)
浅色调 · 深色调 · 灰色调
浅色调
- 3AAA9E
- 57B3A9
- 6FBDB3
- 86C6BE
- 9BD0C8
- AFD9D3
- C3E3DE
- D7ECE9
- EBF6F4
深色调
- 008B80
- 00766D
- 00615A
- 004E48
- 003B36
- 002926
- 001916
- 000908
- 000101
灰色调
- 299D92
- 3C9A90
- 49978E
- 54948C
- 5E918A
- 668D88
- 6D8A86
- 748784
- 7A8382
配色和谐
互补色 +180°
- 00A094
Alhambra
- C36C81
≈ Pink Manhattan
类似色 -30° +30°
- 00A094
Alhambra
- 4A9E6D
≈ Basil Pesto
- 069BB5
≈ Barrier Reef
三角配色 +120° +240°
- 00A094
Alhambra
- 9B78C0
≈ Purple Pride
- B87B39
≈ Molten Caramel
分裂互补色 +150° +210°
- 00A094
Alhambra
- B46FA5
≈ Pink Parade
- C4705B
≈ Cajun Spice
四角配色 +90° +180° +270°
对比度与无障碍
Ag
Fail白底
WCAG 3.25:1 · APCA Lc 59
Ag
AA黑底
WCAG 6.45:1 · APCA Lc 43
最佳文字颜色: #000000
WCAG 6.45:1 (AA) · APCA Lc 43
Contrast pairs
代码片段
CSS
:root {
--alhambra: #00a094;
--alhambra-rgb: 0 160 148;
--alhambra-oklch: oklch(0.635 0.112 185.5);
}
.element {
color: var(--alhambra);
background-color: hsl(176 100% 31%);
border-color: oklch(0.635 0.112 185.5);
}Tailwind CSS v4
@theme {
--color-alhambra: #00a094;
--color-alhambra-50: #d2fffb;
--color-alhambra-100: #bef5ee;
--color-alhambra-200: #9ce4dd;
--color-alhambra-300: #6ecac1;
--color-alhambra-400: #3cb4a8;
--color-alhambra-500: #009d90;
--color-alhambra-600: #00857a;
--color-alhambra-700: #006b62;
--color-alhambra-800: #004f46;
--color-alhambra-900: #003731;
--color-alhambra-950: #00211d;
}SCSS
$alhambra: #00a094;
$alhambra-rgb: 0, 160, 148;
$alhambra-light: mix(#fff, $alhambra, 20%);
$alhambra-dark: mix(#000, $alhambra, 20%);
.element {
color: $alhambra;
box-shadow: 0 0 0 2px rgba($alhambra, 0.35);
}