色名 · #00CCBB
Pristine Oceanic
Pristine Oceanicは#00CCBB：rgb(0 204 187)、hsl(175 100% 40%)、oklch(0.76 0.134 184.3)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Teal mean? → · Pristine Oceanic color name →
#00CCBB
oklch(0.76 0.134 184.3)
カラー変換
- HEX
- #00ccbb
- RGB
- rgb(0 204 187)
- HSL
- hsl(175 100% 40%)
- HWB
- hwb(175 0% 20%)
- OKLCH
- oklch(0.76 0.134 184.3)
- OKLab
- oklab(0.76 -0.134 -0.01)
- CIE Lab
- lab(73.74 -46.64 -4.14)
- LCH
- lch(73.74 46.82 185.1)
- CMYK
- cmyk(100% 0% 8% 20%)
ティント · シェード · トーン
ティント
- 44D1C2
- 63D7C8
- 7BDCCF
- 91E1D6
- A5E6DD
- B8ECE3
- CAF1EA
- DCF5F1
- EEFAF8
シェード
- 00B1A2
- 00978A
- 007E73
- 00655C
- 004E46
- 003732
- 00221F
- 000F0D
- 000202
トーン
- 32C4B5
- 46BDAF
- 53B5A9
- 5EAEA3
- 66A69D
- 6D9E97
- 739791
- 788F8B
- 7C8886
カラーハーモニー
補色 +180°
- 00CCBB
Pristine Oceanic
- F78BA6
≈ Bunny Fluff
類似色 -30° +30°
- 00CCBB
Pristine Oceanic
- 63CA8A
≈ Vegetation
- 00C6E5
≈ Caribbean Blue
トライアド +120° +240°
- 00CCBB
Pristine Oceanic
- C49AF6
≈ Baby Purple
- EB9D4C
≈ Sunflower Field
スプリットコンプリメンタリー +150° +210°
- 00CCBB
Pristine Oceanic
- E48FD4
≈ Love Dust
- FA9076
≈ Kissable
テトラード +90° +180° +270°
- 00CCBB
Pristine Oceanic
- 99AAFF
≈ Widowmaker
- F78BA6
≈ Bunny Fluff
- CDAF3C
≈ Sugar Leaves
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 2.02:1 · APCA Lc 39
Ag
AAA黒の上
WCAG 10.35:1 · APCA Lc 64
最適な文字色: #000000
WCAG 10.35:1 (AAA) · APCA Lc 64
Contrast pairs
コードスニペット
CSS
:root {
--pristine-oceanic: #00ccbb;
--pristine-oceanic-rgb: 0 204 187;
--pristine-oceanic-oklch: oklch(0.76 0.134 184.3);
}
.element {
color: var(--pristine-oceanic);
background-color: hsl(175 100% 40%);
border-color: oklch(0.76 0.134 184.3);
}Tailwind CSS v4
@theme {
--color-pristine-oceanic: #00ccbb;
--color-pristine-oceanic-50: #cafffb;
--color-pristine-oceanic-100: #b5f7ef;
--color-pristine-oceanic-200: #8ee7dd;
--color-pristine-oceanic-300: #58cec2;
--color-pristine-oceanic-400: #00b7a8;
--color-pristine-oceanic-500: #00a191;
--color-pristine-oceanic-600: #00887a;
--color-pristine-oceanic-700: #006d62;
--color-pristine-oceanic-800: #005146;
--color-pristine-oceanic-900: #003831;
--color-pristine-oceanic-950: #00231d;
}SCSS
$pristine-oceanic: #00ccbb;
$pristine-oceanic-rgb: 0, 204, 187;
$pristine-oceanic-light: mix(#fff, $pristine-oceanic, 20%);
$pristine-oceanic-dark: mix(#000, $pristine-oceanic, 20%);
.element {
color: $pristine-oceanic;
box-shadow: 0 0 0 2px rgba($pristine-oceanic, 0.35);
}