色名 · #55DDCC
Jazzy Jade
Jazzy Jadeは#55DDCC：rgb(85 221 204)、hsl(173 67% 60%)、oklch(0.819 0.12 183.7)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Teal mean? → · Jazzy Jade color name →
#55DDCC
oklch(0.819 0.12 183.7)
カラー変換
- HEX
- #55ddcc
- RGB
- rgb(85 221 204)
- HSL
- hsl(173 67% 60%)
- HWB
- hwb(173 33% 13%)
- OKLCH
- oklch(0.819 0.12 183.7)
- OKLab
- oklab(0.819 -0.12 -0.008)
- CIE Lab
- lab(80.47 -41.53 -3.22)
- LCH
- lch(80.47 41.65 184.4)
- CMYK
- cmyk(62% 0% 8% 13%)
ティント · シェード · トーン
ティント
- 6DE1D1
- 81E4D6
- 94E8DB
- A5EBE0
- B5EFE5
- C5F2EA
- D4F5EF
- E2F9F5
- F1FCFA
シェード
- 49C0B1
- 3DA497
- 31887E
- 266E65
- 1C554E
- 113D37
- 082622
- 02110F
- 000202
トーン
- 5FD4C4
- 67CABC
- 6DC1B5
- 72B7AD
- 76AEA5
- 79A59E
- 7C9C96
- 7E928F
- 7F8987
カラーハーモニー
補色 +180°
- 55DDCC
Jazzy Jade
- FFA6BC
≈ Amélie’s Tutu
類似色 -30° +30°
- 55DDCC
Jazzy Jade
- 82DBA0
≈ Patrice
- 52D8F3
≈ Electric Lemonade
トライアド +120° +240°
- 55DDCC
Jazzy Jade
- D3B2FF
≈ Light Violet
- FAB26D
≈ Jambalaya
スプリットコンプリメンタリー +150° +210°
- 55DDCC
Jazzy Jade
- F3A6E4
≈ Land of Dreams
- FFAB98
≈ Pink Rose Bud
テトラード +90° +180° +270°
- 55DDCC
Jazzy Jade
- B1C0FF
≈ Dried Lilac
- FFA6BC
≈ Amélie’s Tutu
- DEC262
≈ Crusade King
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 1.66:1 · APCA Lc 29
Ag
AAA黒の上
WCAG 12.60:1 · APCA Lc 74
最適な文字色: #000000
WCAG 12.60:1 (AAA) · APCA Lc 74
Contrast pairs
コードスニペット
CSS
:root {
--jazzy-jade: #55ddcc;
--jazzy-jade-rgb: 85 221 204;
--jazzy-jade-oklch: oklch(0.819 0.12 183.7);
}
.element {
color: var(--jazzy-jade);
background-color: hsl(173 67% 60%);
border-color: oklch(0.819 0.12 183.7);
}Tailwind CSS v4
@theme {
--color-jazzy-jade: #55ddcc;
--color-jazzy-jade-50: #d0fffa;
--color-jazzy-jade-100: #bbf6ed;
--color-jazzy-jade-200: #98e5db;
--color-jazzy-jade-300: #67ccc0;
--color-jazzy-jade-400: #2db5a6;
--color-jazzy-jade-500: #009f8f;
--color-jazzy-jade-600: #008679;
--color-jazzy-jade-700: #006c61;
--color-jazzy-jade-800: #004f45;
--color-jazzy-jade-900: #003730;
--color-jazzy-jade-950: #00221c;
}SCSS
$jazzy-jade: #55ddcc;
$jazzy-jade-rgb: 85, 221, 204;
$jazzy-jade-light: mix(#fff, $jazzy-jade, 20%);
$jazzy-jade-dark: mix(#000, $jazzy-jade, 20%);
.element {
color: $jazzy-jade;
box-shadow: 0 0 0 2px rgba($jazzy-jade, 0.35);
}