色名 · #00A096
Spectra Green
Spectra Greenは#00A096：rgb(0 160 150)、hsl(176 100% 31%)、oklch(0.635 0.111 187)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Teal mean? → · Spectra Green color name →
#00A096
oklch(0.635 0.111 187)
カラー変換
- HEX
- #00a096
- RGB
- rgb(0 160 150)
- HSL
- hsl(176 100% 31%)
- HWB
- hwb(176 0% 37%)
- OKLCH
- oklch(0.635 0.111 187)
- OKLab
- oklab(0.635 -0.11 -0.014)
- CIE Lab
- lab(59.02 -38.12 -5.33)
- LCH
- lch(59.02 38.5 188)
- CMYK
- cmyk(100% 0% 6% 37%)
ティント · シェード · トーン
ティント
- 3AAAA0
- 57B3AA
- 6FBDB4
- 86C6BF
- 9BD0C9
- AFD9D4
- C3E3DE
- D7ECE9
- EBF6F4
シェード
- 008B82
- 00766E
- 00615B
- 004E49
- 003B37
- 002926
- 001916
- 000908
- 000101
トーン
- 299D94
- 3C9A92
- 49978F
- 54948D
- 5E918B
- 668D89
- 6D8A87
- 748784
- 7A8382
カラーハーモニー
補色 +180°
- 00A096
Spectra Green
- C36D7F
≈ Pink Manhattan
類似色 -30° +30°
- 00A096
Spectra Green
- 489F6F
≈ Basil Pesto
- 109BB6
≈ Barrier Reef
トライアド +120° +240°
- 00A096
Spectra Green
- 9C78BF
≈ Purple Pride
- B77C39
≈ Spruce Yellow
スプリットコンプリメンタリー +150° +210°
- 00A096
Spectra Green
- B570A3
≈ Pink Parade
- C47159
≈ Cajun Spice
テトラード +90° +180° +270°
- 00A096
Spectra Green
- 7A84CD
≈ Twilight Twinkle
- C36D7F
≈ Pink Manhattan
- 9E8B30
≈ Parsnip Root
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 3.24:1 · APCA Lc 59
Ag
AA黒の上
WCAG 6.46:1 · APCA Lc 43
最適な文字色: #000000
WCAG 6.46:1 (AA) · APCA Lc 43
Contrast pairs
コードスニペット
CSS
:root {
--spectra-green: #00a096;
--spectra-green-rgb: 0 160 150;
--spectra-green-oklch: oklch(0.635 0.111 187);
}
.element {
color: var(--spectra-green);
background-color: hsl(176 100% 31%);
border-color: oklch(0.635 0.111 187);
}Tailwind CSS v4
@theme {
--color-spectra-green: #00a096;
--color-spectra-green-50: #d2fffc;
--color-spectra-green-100: #bef4ef;
--color-spectra-green-200: #9ce4de;
--color-spectra-green-300: #6ecac3;
--color-spectra-green-400: #3cb3a9;
--color-spectra-green-500: #009d92;
--color-spectra-green-600: #00857c;
--color-spectra-green-700: #006a63;
--color-spectra-green-800: #004e47;
--color-spectra-green-900: #003731;
--color-spectra-green-950: #00211d;
}SCSS
$spectra-green: #00a096;
$spectra-green-rgb: 0, 160, 150;
$spectra-green-light: mix(#fff, $spectra-green, 20%);
$spectra-green-dark: mix(#000, $spectra-green, 20%);
.element {
color: $spectra-green;
box-shadow: 0 0 0 2px rgba($spectra-green, 0.35);
}