色名 · #65DCD6
Hammam Blue
Hammam Blueは#65DCD6：rgb(101 220 214)、hsl(177 63% 63%)、oklch(0.825 0.108 190.8)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Teal mean? → · Hammam Blue color name →
#65DCD6
oklch(0.825 0.108 190.8)
カラー変換
- HEX
- #65dcd6
- RGB
- rgb(101 220 214)
- HSL
- hsl(177 63% 63%)
- HWB
- hwb(177 40% 14%)
- OKLCH
- oklch(0.825 0.108 190.8)
- OKLab
- oklab(0.825 -0.106 -0.02)
- CIE Lab
- lab(80.89 -36.06 -7.81)
- LCH
- lch(80.89 36.9 192.2)
- CMYK
- cmyk(54% 0% 3% 14%)
ティント · シェード · トーン
ティント
- 79E0DA
- 8BE3DE
- 9BE7E2
- ABEBE6
- BAEEEA
- C8F2EF
- D6F5F3
- E4F8F7
- F2FCFB
シェード
- 57BFBA
- 49A39E
- 3C8884
- 2F6E6A
- 225452
- 173C3B
- 0C2625
- 031110
- 000202
トーン
- 6BD3CD
- 71C9C4
- 75C0BB
- 78B7B3
- 7BADAA
- 7DA4A1
- 7E9B99
- 7F9291
- 808988
カラーハーモニー
補色 +180°
- 65DCD6
Hammam Blue
- FFABB6
≈ A Brand New Day
類似色 -30° +30°
- 65DCD6
Hammam Blue
- 83DCAF
≈ Jovial Jade
- 6CD6F7
≈ Heisenberg Blue
トライアド +120° +240°
- 65DCD6
Hammam Blue
- DCB2F9
≈ Light Violet
- F2BA75
≈ Yellow-Rumped Warbler
スプリットコンプリメンタリー +150° +210°
- 65DCD6
Hammam Blue
- F6AADB
≈ Hanami Pink
- FFAF92
≈ Peach Nectar
テトラード +90° +180° +270°
- 65DCD6
Hammam Blue
- BBC0FF
≈ Dried Lilac
- FFABB6
≈ A Brand New Day
- D5C873
≈ March Tulip Green
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 1.64:1 · APCA Lc 28
Ag
AAA黒の上
WCAG 12.76:1 · APCA Lc 75
最適な文字色: #000000
WCAG 12.76:1 (AAA) · APCA Lc 75
Contrast pairs
コードスニペット
CSS
:root {
--hammam-blue: #65dcd6;
--hammam-blue-rgb: 101 220 214;
--hammam-blue-oklch: oklch(0.825 0.108 190.8);
}
.element {
color: var(--hammam-blue);
background-color: hsl(177 63% 63%);
border-color: oklch(0.825 0.108 190.8);
}Tailwind CSS v4
@theme {
--color-hammam-blue: #65dcd6;
--color-hammam-blue-50: #d3fffd;
--color-hammam-blue-100: #bff4f2;
--color-hammam-blue-200: #9de3e1;
--color-hammam-blue-300: #70c9c6;
--color-hammam-blue-400: #3fb3ad;
--color-hammam-blue-500: #009c97;
--color-hammam-blue-600: #008480;
--color-hammam-blue-700: #006a66;
--color-hammam-blue-800: #004e4a;
--color-hammam-blue-900: #003633;
--color-hammam-blue-950: #00211f;
}SCSS
$hammam-blue: #65dcd6;
$hammam-blue-rgb: 101, 220, 214;
$hammam-blue-light: mix(#fff, $hammam-blue, 20%);
$hammam-blue-dark: mix(#000, $hammam-blue, 20%);
.element {
color: $hammam-blue;
box-shadow: 0 0 0 2px rgba($hammam-blue, 0.35);
}