色名 · #9CD4E1
Ocean Cruise
Ocean Cruiseは#9CD4E1：rgb(156 212 225)、hsl(191 53% 75%)、oklch(0.836 0.06 213.6)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Cyan mean? → · Ocean Cruise color name →
#9CD4E1
oklch(0.836 0.06 213.6)
カラー変換
- HEX
- #9cd4e1
- RGB
- rgb(156 212 225)
- HSL
- hsl(191 53% 75%)
- HWB
- hwb(191 61% 12%)
- OKLCH
- oklch(0.836 0.06 213.6)
- OKLab
- oklab(0.836 -0.05 -0.033)
- CIE Lab
- lab(81.38 -16.37 -12.57)
- LCH
- lch(81.38 20.65 217.5)
- CMYK
- cmyk(31% 6% 0% 12%)
ティント · シェード · トーン
ティント
- A6D8E4
- B0DDE7
- BAE1EA
- C4E5ED
- CEEAF0
- D8EEF3
- E2F2F6
- ECF6F9
- F5FBFC
シェード
- 87B8C4
- 739DA7
- 5F838B
- 4C6970
- 395156
- 283A3E
- 182427
- 091012
- 010202
トーン
- 9ACBD7
- 97C3CD
- 95BAC3
- 92B2B9
- 8FA9AF
- 8CA1A6
- 89999C
- 869093
- 838889
カラーハーモニー
補色 +180°
- 9CD4E1
Ocean Cruise
- EEBCB0
≈ Virgin Peach
類似色 -30° +30°
- 9CD4E1
Ocean Cruise
- 9DD7CD
≈ Yucca Cream
- A8CEEE
≈ Andromeda Blue
トライアド +120° +240°
- 9CD4E1
Ocean Cruise
- E2BBDA
≈ Sweetie Pie
- D6C99D
≈ Ground Ginger
スプリットコンプリメンタリー +150° +210°
- 9CD4E1
Ocean Cruise
- ECB9C5
≈ Chantilly
- E6C1A1
≈ Library Card
テトラード +90° +180° +270°
- 9CD4E1
Ocean Cruise
- D1C0EA
≈ York Plum
- EEBCB0
≈ Virgin Peach
- C1D0A5
≈ Landscape
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 1.62:1 · APCA Lc 28
Ag
AAA黒の上
WCAG 12.91:1 · APCA Lc 75
最適な文字色: #000000
WCAG 12.91:1 (AAA) · APCA Lc 75
Contrast pairs
コードスニペット
CSS
:root {
--ocean-cruise: #9cd4e1;
--ocean-cruise-rgb: 156 212 225;
--ocean-cruise-oklch: oklch(0.836 0.06 213.6);
}
.element {
color: var(--ocean-cruise);
background-color: hsl(191 53% 75%);
border-color: oklch(0.836 0.06 213.6);
}Tailwind CSS v4
@theme {
--color-ocean-cruise: #9cd4e1;
--color-ocean-cruise-50: #e3faff;
--color-ocean-cruise-100: #d2edf5;
--color-ocean-cruise-200: #b8dbe5;
--color-ocean-cruise-300: #95c0cb;
--color-ocean-cruise-400: #74a8b4;
--color-ocean-cruise-500: #54919e;
--color-ocean-cruise-600: #487b86;
--color-ocean-cruise-700: #39626b;
--color-ocean-cruise-800: #28484e;
--color-ocean-cruise-900: #1b3237;
--color-ocean-cruise-950: #0b1e21;
}SCSS
$ocean-cruise: #9cd4e1;
$ocean-cruise-rgb: 156, 212, 225;
$ocean-cruise-light: mix(#fff, $ocean-cruise, 20%);
$ocean-cruise-dark: mix(#000, $ocean-cruise, 20%);
.element {
color: $ocean-cruise;
box-shadow: 0 0 0 2px rgba($ocean-cruise, 0.35);
}