Benoemde kleur · #B7E6E6
Refreshing Pool
Refreshing Pool is #B7E6E6: rgb(183 230 230), hsl(180 48% 81%), oklch(0.892 0.048 196.3). Bekijk tinten, schaduwen, harmonieën, WCAG- en APCA-contrast en CSS-, Tailwind v4- en SCSS-code.
What does Teal mean? → · Refreshing Pool color name →
#B7E6E6
oklch(0.892 0.048 196.3)
Kleurconversies
- HEX
- #b7e6e6
- RGB
- rgb(183 230 230)
- HSL
- hsl(180 48% 81%)
- HWB
- hwb(180 72% 10%)
- OKLCH
- oklch(0.892 0.048 196.3)
- OKLab
- oklab(0.892 -0.046 -0.014)
- CIE Lab
- lab(88 -15.68 -5.26)
- LCH
- lch(88 16.54 198.6)
- CMYK
- cmyk(20% 0% 0% 10%)
Tinten · Schaduwen · Tonen
Tinten
- BEE9E8
- C6EBEB
- CDEEED
- D4F0F0
- DCF3F2
- E3F5F5
- EAF8F7
- F1FAFA
- F8FDFC
Schaduwen
- 9FC8C8
- 87ABAB
- 708E8E
- 5A7373
- 455959
- 314040
- 1E2828
- 0C1313
- 020303
Tonen
- B2DBDB
- ACD1D1
- A7C6C6
- A1BCBC
- 9CB2B2
- 96A8A7
- 919E9D
- 8B9494
- 868A8A
Kleurharmonieën
Complementair +180°
- B7E6E6
Refreshing Pool
- FACFD0
≈ Fading Rose
Analoog -30° +30°
- B7E6E6
Refreshing Pool
- BEE6D4
≈ Workout Green
- BBE3F4
≈ Breaking the Ice
Triadisch +120° +240°
- B7E6E6
Refreshing Pool
- E8D2F1
≈ Lavender Princess
- EED8B8
≈ Cameo White
Gesplitst complementair +150° +210°
- B7E6E6
Refreshing Pool
- F5CFE2
≈ Minimal Rose
- F8D2C1
≈ Demure Pink
Tetradisch +90° +180° +270°
- B7E6E6
Refreshing Pool
- D8D7FB
≈ Japan Blush
- FACFD0
≈ Fading Rose
- DFDEBA
≈ Tropical Tale
Contrast en toegankelijkheid
Ag
FailOp wit
WCAG 1.35:1 · APCA Lc 17
Ag
AAAOp zwart
WCAG 15.47:1 · APCA Lc 86
Beste tekstkleur: #000000
WCAG 15.47:1 (AAA) · APCA Lc 86
Contrast pairs
Codefragmenten
CSS
:root {
--refreshing-pool: #b7e6e6;
--refreshing-pool-rgb: 183 230 230;
--refreshing-pool-oklch: oklch(0.892 0.048 196.3);
}
.element {
color: var(--refreshing-pool);
background-color: hsl(180 48% 81%);
border-color: oklch(0.892 0.048 196.3);
}Tailwind CSS v4
@theme {
--color-refreshing-pool: #b7e6e6;
--color-refreshing-pool-50: #e6fafa;
--color-refreshing-pool-100: #d6edee;
--color-refreshing-pool-200: #bddbdc;
--color-refreshing-pool-300: #9bbfc0;
--color-refreshing-pool-400: #7da8a8;
--color-refreshing-pool-500: #5f9091;
--color-refreshing-pool-600: #517a7a;
--color-refreshing-pool-700: #406262;
--color-refreshing-pool-800: #2e4847;
--color-refreshing-pool-900: #1f3231;
--color-refreshing-pool-950: #0f1e1d;
}SCSS
$refreshing-pool: #b7e6e6;
$refreshing-pool-rgb: 183, 230, 230;
$refreshing-pool-light: mix(#fff, $refreshing-pool, 20%);
$refreshing-pool-dark: mix(#000, $refreshing-pool, 20%);
.element {
color: $refreshing-pool;
box-shadow: 0 0 0 2px rgba($refreshing-pool, 0.35);
}