色名 · #E4F3DF
Sea Cap
Sea Capは#E4F3DF：rgb(228 243 223)、hsl(105 45% 91%)、oklch(0.948 0.031 137.8)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Gray mean? → · Sea Cap color name →
#E4F3DF
oklch(0.948 0.031 137.8)
カラー変換
- HEX
- #e4f3df
- RGB
- rgb(228 243 223)
- HSL
- hsl(105 45% 91%)
- HWB
- hwb(105 87% 5%)
- OKLCH
- oklch(0.948 0.031 137.8)
- OKLab
- oklab(0.948 -0.023 0.021)
- CIE Lab
- lab(94.31 -7.79 7.89)
- LCH
- lch(94.31 11.09 134.6)
- CMYK
- cmyk(6% 0% 8% 5%)
ティント · シェード · トーン
ティント
- E7F4E2
- E9F5E5
- ECF7E9
- EFF8EC
- F1F9EF
- F4FAF2
- F7FBF5
- FAFDF9
- FCFEFC
シェード
- C6D3C2
- A9B4A5
- 8D978A
- 727A6F
- 585E56
- 3F443D
- 282B27
- 121412
- 030302
トーン
- DAE7D5
- CFDBCB
- C5CFC2
- BBC3B8
- B1B8AE
- A7ACA5
- 9DA19C
- 939692
- 8A8B89
カラーハーモニー
補色 +180°
- E4F3DF
Sea Cap
- F7E8FC
≈ Placebo Fuchsia
類似色 -30° +30°
- E4F3DF
Sea Cap
- EFF0D8
≈ Budding Leaf
- DBF5EA
≈ Diluted Mint
トライアド +120° +240°
- E4F3DF
Sea Cap
- E3EFFF
≈ Brilliant White
- FFE7E7
≈ Vanilla Strawberry
スプリットコンプリメンタリー +150° +210°
- E4F3DF
Sea Cap
- ECEBFF
≈ Placebo Purple
- FFE6F1
≈ Cherubic
テトラード +90° +180° +270°
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 1.15:1 · APCA Lc 0
Ag
AAA黒の上
WCAG 18.18:1 · APCA Lc 97
最適な文字色: #000000
WCAG 18.18:1 (AAA) · APCA Lc 97
Contrast pairs
コードスニペット
CSS
:root {
--sea-cap: #e4f3df;
--sea-cap-rgb: 228 243 223;
--sea-cap-oklch: oklch(0.948 0.031 137.8);
}
.element {
color: var(--sea-cap);
background-color: hsl(105 45% 91%);
border-color: oklch(0.948 0.031 137.8);
}Tailwind CSS v4
@theme {
--color-sea-cap: #e4f3df;
--color-sea-cap-50: #f1f7ef;
--color-sea-cap-100: #e3ebe1;
--color-sea-cap-200: #ced8cb;
--color-sea-cap-300: #afbcad;
--color-sea-cap-400: #96a391;
--color-sea-cap-500: #7c8b77;
--color-sea-cap-600: #697665;
--color-sea-cap-700: #545e51;
--color-sea-cap-800: #3e453a;
--color-sea-cap-900: #2a3028;
--color-sea-cap-950: #181c16;
}SCSS
$sea-cap: #e4f3df;
$sea-cap-rgb: 228, 243, 223;
$sea-cap-light: mix(#fff, $sea-cap, 20%);
$sea-cap-dark: mix(#000, $sea-cap, 20%);
.element {
color: $sea-cap;
box-shadow: 0 0 0 2px rgba($sea-cap, 0.35);
}