色名 · #00A0B0
Breaking Wave
Breaking Waveは#00A0B0：rgb(0 160 176)、hsl(185 100% 35%)、oklch(0.645 0.111 207.3)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Cyan mean? → · Breaking Wave color name →
#00A0B0
oklch(0.645 0.111 207.3)
カラー変換
- HEX
- #00a0b0
- RGB
- rgb(0 160 176)
- HSL
- hsl(185 100% 35%)
- HWB
- hwb(185 0% 31%)
- OKLCH
- oklch(0.645 0.111 207.3)
- OKLab
- oklab(0.645 -0.098 -0.051)
- CIE Lab
- lab(59.74 -31.72 -18.85)
- LCH
- lch(59.74 36.9 210.7)
- CMYK
- cmyk(100% 9% 0% 31%)
ティント · シェード · トーン
ティント
- 3BAAB8
- 58B3C0
- 70BDC8
- 86C6CF
- 9BD0D7
- B0D9DF
- C4E3E7
- D8ECEF
- EBF6F7
シェード
- 008B99
- 007682
- 00616C
- 004E56
- 003B42
- 00292E
- 00191C
- 00090B
- 000101
トーン
- 2A9DAB
- 3C9AA6
- 4A97A2
- 55949D
- 5E9198
- 668D93
- 6D8A8E
- 74878A
- 7A8385
カラーハーモニー
補色 +180°
- 00A0B0
Breaking Wave
- C87268
≈ Living Large
類似色 -30° +30°
- 00A0B0
Breaking Wave
- 25A38D
≈ Stamp Pad Green
- 4197C9
≈ Blessed Blue
トライアド +120° +240°
- 00A0B0
Breaking Wave
- B175B0
≈ Moonlight Melody
- AA8932
≈ Rich Gold
スプリットコンプリメンタリー +150° +210°
- 00A0B0
Breaking Wave
- C3708E
≈ Prehistoric Pink
- C07B45
≈ Sedona at Sunset
テトラード +90° +180° +270°
- 00A0B0
Breaking Wave
- 957FC9
≈ Amethyst Grey
- C87268
≈ Living Large
- 899642
≈ Café de Paris
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 3.15:1 · APCA Lc 58
Ag
AA黒の上
WCAG 6.65:1 · APCA Lc 44
最適な文字色: #000000
WCAG 6.65:1 (AA) · APCA Lc 44
Contrast pairs
コードスニペット
CSS
:root {
--breaking-wave: #00a0b0;
--breaking-wave-rgb: 0 160 176;
--breaking-wave-oklch: oklch(0.645 0.111 207.3);
}
.element {
color: var(--breaking-wave);
background-color: hsl(185 100% 35%);
border-color: oklch(0.645 0.111 207.3);
}Tailwind CSS v4
@theme {
--color-breaking-wave: #00a0b0;
--color-breaking-wave-50: #d2ffff;
--color-breaking-wave-100: #bef3fc;
--color-breaking-wave-200: #9be2ee;
--color-breaking-wave-300: #6dc7d6;
--color-breaking-wave-400: #38b1c0;
--color-breaking-wave-500: #009aab;
--color-breaking-wave-600: #008291;
--color-breaking-wave-700: #006874;
--color-breaking-wave-800: #004d55;
--color-breaking-wave-900: #00353b;
--color-breaking-wave-950: #002025;
}SCSS
$breaking-wave: #00a0b0;
$breaking-wave-rgb: 0, 160, 176;
$breaking-wave-light: mix(#fff, $breaking-wave, 20%);
$breaking-wave-dark: mix(#000, $breaking-wave, 20%);
.element {
color: $breaking-wave;
box-shadow: 0 0 0 2px rgba($breaking-wave, 0.35);
}