最も近い色名 · #E7F1E3
#E7F1E3
最も近い色名: Floaty Bubble
#E7F1E3（rgb(231 241 227)、hsl(103 33% 92%)、oklch(0.947 0.021 136.6)）に最も近い色名はFloaty Bubbleです。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
#E7F1E3
oklch(0.947 0.021 136.6)
カラー変換
- HEX
- #e7f1e3
- RGB
- rgb(231 241 227)
- HSL
- hsl(103 33% 92%)
- HWB
- hwb(103 89% 5%)
- OKLCH
- oklch(0.947 0.021 136.6)
- OKLab
- oklab(0.947 -0.016 0.015)
- CIE Lab
- lab(94.1 -5.29 5.58)
- LCH
- lch(94.1 7.69 133.5)
- CMYK
- cmyk(4% 0% 6% 5%)
ティント · シェード · トーン
ティント
- E9F2E6
- ECF4E9
- EEF5EB
- F1F7EE
- F3F8F1
- F5F9F4
- F8FBF7
- FAFCF9
- FDFEFC
シェード
- C9D2C5
- ABB3A8
- 8F958C
- 737971
- 595D57
- 40433F
- 282B27
- 131412
- 030303
トーン
- DCE5D9
- D2D9CE
- C7CEC4
- BCC2BA
- B2B7B0
- A8ACA6
- 9EA19D
- 949693
- 8A8B89
カラーハーモニー
補色 +180°
- E7F1E3
Floaty Bubble
- F3E9F7
≈ Perfume Haze
類似色 -30° +30°
- E7F1E3
Floaty Bubble
- EFEFDE
≈ Highlight
- E1F2EA
≈ Paradise
トライアド +120° +240°
- E7F1E3
Floaty Bubble
- E4EEFC
≈ Cotton Boll
- FCE8E8
≈ Unburdened Pink
スプリットコンプリメンタリー +150° +210°
- E7F1E3
Floaty Bubble
- ECECFC
≈ Placebo Purple
- F9E8F0
≈ Cherry Pearl
テトラード +90° +180° +270°
- E7F1E3
Floaty Bubble
- DFF1F9
≈ Wizard White
- F3E9F7
≈ Perfume Haze
- FAE9E2
≈ Diminished Orange
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 1.16:1 · APCA Lc 8
Ag
AAA黒の上
WCAG 18.08:1 · APCA Lc 97
最適な文字色: #000000
WCAG 18.08:1 (AAA) · APCA Lc 97
Contrast pairs
コードスニペット
CSS
:root {
--floaty-bubble: #e7f1e3;
--floaty-bubble-rgb: 231 241 227;
--floaty-bubble-oklch: oklch(0.947 0.021 136.6);
}
.element {
color: var(--floaty-bubble);
background-color: hsl(103 33% 92%);
border-color: oklch(0.947 0.021 136.6);
}Tailwind CSS v4
@theme {
--color-floaty-bubble: #e7f1e3;
--color-floaty-bubble-50: #f2f7f1;
--color-floaty-bubble-100: #e4eae3;
--color-floaty-bubble-200: #d0d7ce;
--color-floaty-bubble-300: #b2bab0;
--color-floaty-bubble-400: #99a295;
--color-floaty-bubble-500: #808a7c;
--color-floaty-bubble-600: #6c7469;
--color-floaty-bubble-700: #565d54;
--color-floaty-bubble-800: #3f443d;
--color-floaty-bubble-900: #2c2f2a;
--color-floaty-bubble-950: #191c17;
}SCSS
$floaty-bubble: #e7f1e3;
$floaty-bubble-rgb: 231, 241, 227;
$floaty-bubble-light: mix(#fff, $floaty-bubble, 20%);
$floaty-bubble-dark: mix(#000, $floaty-bubble, 20%);
.element {
color: $floaty-bubble;
box-shadow: 0 0 0 2px rgba($floaty-bubble, 0.35);
}