Cor nomeada · #B2DCEF
Soap Bubble
Soap Bubble é #B2DCEF: rgb(178 220 239), hsl(199 66% 82%), oklch(0.871 0.051 227.2). Veja tons claros, sombras, harmonias, contraste WCAG e APCA e código CSS, Tailwind v4 e SCSS.
What does Cyan mean? → · Soap Bubble color name →
#B2DCEF
oklch(0.871 0.051 227.2)
Conversões de cor
- HEX
- #b2dcef
- RGB
- rgb(178 220 239)
- HSL
- hsl(199 66% 82%)
- HWB
- hwb(199 70% 6%)
- OKLCH
- oklch(0.871 0.051 227.2)
- OKLab
- oklab(0.871 -0.035 -0.038)
- CIE Lab
- lab(85.22 -11.05 -14.09)
- LCH
- lch(85.22 17.9 231.9)
- CMYK
- cmyk(26% 8% 0% 6%)
Tons claros · Sombras · Tons
Tons claros
- BAE0F1
- C2E3F2
- C9E7F4
- D1EAF6
- D9EEF7
- E0F1F9
- E8F5FA
- F0F8FC
- F7FCFD
Sombras
- 9ABFD0
- 83A3B1
- 6D8894
- 576E78
- 43545C
- 2F3C42
- 1D262A
- 0C1114
- 010203
Tons
- ADD2E3
- A8C9D8
- A3C0CD
- 9EB6C1
- 99ADB6
- 94A4AB
- 8F9BA0
- 8A9295
- 85898B
Harmonias de cor
Complementar +180°
- B2DCEF
Soap Bubble
- F2CBB8
≈ Watusi
Análoga -30° +30°
- B2DCEF
Soap Bubble
- AEDFE0
≈ Blue Light
- C0D6F7
≈ Mr. Glass
Tríade +120° +240°
- B2DCEF
Soap Bubble
- EFC8DB
≈ Persian Delight
- D8D7B1
≈ Morning Moor
Complementar dividida +150° +210°
- B2DCEF
Soap Bubble
- F5C8C8
≈ Blushing Senorita
- E8D1B0
≈ Powdered Gold
Tétrade +90° +180° +270°
- B2DCEF
Soap Bubble
- E3CBEB
≈ Syrian Violet
- F2CBB8
≈ Watusi
- C5DDBC
≈ Galway
Contraste e acessibilidade
Ag
FailSobre branco
WCAG 1.46:1 · APCA Lc 22
Ag
AAASobre preto
WCAG 14.37:1 · APCA Lc 81
Melhor cor de texto: #000000
WCAG 14.37:1 (AAA) · APCA Lc 81
Contrast pairs
Trechos de código
CSS
:root {
--soap-bubble: #b2dcef;
--soap-bubble-rgb: 178 220 239;
--soap-bubble-oklch: oklch(0.871 0.051 227.2);
}
.element {
color: var(--soap-bubble);
background-color: hsl(199 66% 82%);
border-color: oklch(0.871 0.051 227.2);
}Tailwind CSS v4
@theme {
--color-soap-bubble: #b2dcef;
--color-soap-bubble-50: #e7f8ff;
--color-soap-bubble-100: #d7ecf6;
--color-soap-bubble-200: #bfd9e6;
--color-soap-bubble-300: #9dbdcd;
--color-soap-bubble-400: #7fa5b6;
--color-soap-bubble-500: #618da1;
--color-soap-bubble-600: #537888;
--color-soap-bubble-700: #42606d;
--color-soap-bubble-800: #2f4650;
--color-soap-bubble-900: #203138;
--color-soap-bubble-950: #0f1d22;
}SCSS
$soap-bubble: #b2dcef;
$soap-bubble-rgb: 178, 220, 239;
$soap-bubble-light: mix(#fff, $soap-bubble, 20%);
$soap-bubble-dark: mix(#000, $soap-bubble, 20%);
.element {
color: $soap-bubble;
box-shadow: 0 0 0 2px rgba($soap-bubble, 0.35);
}