Color con nombre · #B7A99A
Flax Fibre Grey
Flax Fibre Grey es #B7A99A: rgb(183 169 154), hsl(31 17% 66%), oklch(0.743 0.027 69.3). Mira tintes, sombras, armonías, contraste WCAG y APCA, y código CSS, Tailwind v4 y SCSS.
What does Gray mean? → · Flax Fibre Grey color name →
#B7A99A
oklch(0.743 0.027 69.3)
Conversiones de color
- HEX
- #b7a99a
- RGB
- rgb(183 169 154)
- HSL
- hsl(31 17% 66%)
- HWB
- hwb(31 60% 28%)
- OKLCH
- oklch(0.743 0.027 69.3)
- OKLab
- oklab(0.743 0.009 0.025)
- CIE Lab
- lab(70.13 3.35 9.69)
- LCH
- lch(70.13 10.25 70.9)
- CMYK
- cmyk(0% 8% 16% 28%)
Tintes · Sombras · Tonos
Tintes
- BEB1A4
- C5BAAE
- CCC2B7
- D3CBC1
- DBD3CB
- E2DCD6
- E9E5E0
- F0EDEA
- F8F6F5
Sombras
- 9F9285
- 877C71
- 70675E
- 5A534B
- 453F39
- 312C27
- 1E1B17
- 0C0A09
- 020101
Tonos
- B1A597
- ACA195
- A69D92
- A19890
- 9B948D
- 96908A
- 908C88
- 8B8885
- 858483
Armonías de color
Complementario +180°
- B7A99A
Flax Fibre Grey
- 9FADBC
≈ Petrel Blue Grey
Análogo -30° +30°
- B7A99A
Flax Fibre Grey
- BBA69F
≈ Prestige
- AFAC99
≈ Anise Grey Yellow
Triádico +120° +240°
- B7A99A
Flax Fibre Grey
- 99B1AF
≈ Smooth-Hound Shark
- B1A7B9
≈ Amorphous Rose
Complementario dividido +150° +210°
- B7A99A
Flax Fibre Grey
- 9AB0B7
≈ Electric Slide
- A8AABD
≈ Cream Violet
Tetrádico +90° +180° +270°
- B7A99A
Flax Fibre Grey
- 9EB1A6
≈ Powdered Gum
- 9FADBC
≈ Petrel Blue Grey
- B8A5B1
≈ Buckwheat Mauve
Contraste y accesibilidad
Ag
FailSobre blanco
WCAG 2.29:1 · APCA Lc 45
Ag
AAASobre negro
WCAG 9.15:1 · APCA Lc 57
Mejor color de texto: #000000
WCAG 9.15:1 (AAA) · APCA Lc 57
Contrast pairs
Fragmentos de código
CSS
:root {
--flax-fibre-grey: #b7a99a;
--flax-fibre-grey-rgb: 183 169 154;
--flax-fibre-grey-oklch: oklch(0.743 0.027 69.3);
}
.element {
color: var(--flax-fibre-grey);
background-color: hsl(31 17% 66%);
border-color: oklch(0.743 0.027 69.3);
}Tailwind CSS v4
@theme {
--color-flax-fibre-grey: #b7a99a;
--color-flax-fibre-grey-50: #faf4ed;
--color-flax-fibre-grey-100: #eee7de;
--color-flax-fibre-grey-200: #dcd3c8;
--color-flax-fibre-grey-300: #c0b5a9;
--color-flax-fibre-grey-400: #a99c8e;
--color-flax-fibre-grey-500: #928374;
--color-flax-fibre-grey-600: #7c6f62;
--color-flax-fibre-grey-700: #63594e;
--color-flax-fibre-grey-800: #494139;
--color-flax-fibre-grey-900: #322d27;
--color-flax-fibre-grey-950: #1e1a15;
}SCSS
$flax-fibre-grey: #b7a99a;
$flax-fibre-grey-rgb: 183, 169, 154;
$flax-fibre-grey-light: mix(#fff, $flax-fibre-grey, 20%);
$flax-fibre-grey-dark: mix(#000, $flax-fibre-grey, 20%);
.element {
color: $flax-fibre-grey;
box-shadow: 0 0 0 2px rgba($flax-fibre-grey, 0.35);
}