色名 · #D3E5EB
Ocean Breeze
Ocean Breezeは#D3E5EB：rgb(211 229 235)、hsl(195 38% 87%)、oklch(0.91 0.021 219.7)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Gray mean? → · Ocean Breeze color name →
#D3E5EB
oklch(0.91 0.021 219.7)
カラー変換
- HEX
- #d3e5eb
- RGB
- rgb(211 229 235)
- HSL
- hsl(195 38% 87%)
- HWB
- hwb(195 83% 8%)
- OKLCH
- oklch(0.91 0.021 219.7)
- OKLab
- oklab(0.91 -0.016 -0.013)
- CIE Lab
- lab(89.72 -5.32 -5.09)
- LCH
- lch(89.72 7.36 223.7)
- CMYK
- cmyk(10% 3% 0% 8%)
ティント · シェード · トーン
ティント
- D7E8ED
- DCEAEF
- E0EDF1
- E5EFF3
- E9F2F5
- EDF5F7
- F2F7F9
- F6FAFB
- FBFCFD
シェード
- B7C7CC
- 9CAAAE
- 828E91
- 697275
- 51585B
- 3A3F41
- 242829
- 101213
- 020303
トーン
- CADAE0
- C2D0D5
- B9C6CA
- B1BBBF
- A9B1B4
- A0A7A9
- 989D9F
- 909394
- 888A8A
カラーハーモニー
補色 +180°
- D3E5EB
Ocean Breeze
- EFDDD7
≈ Shabby Chic Pink
類似色 -30° +30°
- D3E5EB
Ocean Breeze
- D3E6E4
≈ Plateau
- D7E3EF
≈ Blooming Aster
トライアド +120° +240°
- D3E5EB
Ocean Breeze
- ECDCE6
≈ Fairy Tail
- E4E2D2
≈ Pale Green Tea
スプリットコンプリメンタリー +150° +210°
- D3E5EB
Ocean Breeze
- EFDCDE
≈ Cupid’s Revenge
- EBDFD3
≈ South Peak
テトラード +90° +180° +270°
- D3E5EB
Ocean Breeze
- E5DEEC
≈ Faint Fuchsia
- EFDDD7
≈ Shabby Chic Pink
- DDE4D6
≈ Lightest Sky
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 1.29:1 · APCA Lc 15
Ag
AAA黒の上
WCAG 16.17:1 · APCA Lc 89
最適な文字色: #000000
WCAG 16.17:1 (AAA) · APCA Lc 89
Contrast pairs
コードスニペット
CSS
:root {
--ocean-breeze: #d3e5eb;
--ocean-breeze-rgb: 211 229 235;
--ocean-breeze-oklch: oklch(0.91 0.021 219.7);
}
.element {
color: var(--ocean-breeze);
background-color: hsl(195 38% 87%);
border-color: oklch(0.91 0.021 219.7);
}Tailwind CSS v4
@theme {
--color-ocean-breeze: #d3e5eb;
--color-ocean-breeze-50: #eff7f9;
--color-ocean-breeze-100: #e1eaed;
--color-ocean-breeze-200: #cbd6db;
--color-ocean-breeze-300: #acbabf;
--color-ocean-breeze-400: #92a2a7;
--color-ocean-breeze-500: #788a90;
--color-ocean-breeze-600: #65757a;
--color-ocean-breeze-700: #515d61;
--color-ocean-breeze-800: #3b4447;
--color-ocean-breeze-900: #282f31;
--color-ocean-breeze-950: #161c1d;
}SCSS
$ocean-breeze: #d3e5eb;
$ocean-breeze-rgb: 211, 229, 235;
$ocean-breeze-light: mix(#fff, $ocean-breeze, 20%);
$ocean-breeze-dark: mix(#000, $ocean-breeze, 20%);
.element {
color: $ocean-breeze;
box-shadow: 0 0 0 2px rgba($ocean-breeze, 0.35);
}