Nazwany kolor · #6A7786
Cypress Grey Blue
Cypress Grey Blue to #6A7786: rgb(106 119 134), hsl(212 12% 47%), oklch(0.564 0.028 252.1). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Gray mean? → · Cypress Grey Blue color name →
#6A7786
oklch(0.564 0.028 252.1)
Konwersje koloru
- HEX
- #6a7786
- RGB
- rgb(106 119 134)
- HSL
- hsl(212 12% 47%)
- HWB
- hwb(212 42% 47%)
- OKLCH
- oklch(0.564 0.028 252.1)
- OKLab
- oklab(0.564 -0.009 -0.027)
- CIE Lab
- lab(49.35 -2.4 -9.95)
- LCH
- lch(49.35 10.24 256.4)
- CMYK
- cmyk(21% 11% 0% 47%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- 788492
- 86919D
- 949EA9
- A3ABB5
- B2B9C1
- C1C6CD
- D0D4D9
- DFE2E6
- EFF1F2
Odcienie ciemniejsze
- 5B6774
- 4D5762
- 3F4751
- 313840
- 242A30
- 181C21
- 0D1013
- 040506
- 000101
Tony
- 6C7885
- 6E7985
- 717A84
- 737B84
- 757C83
- 777C83
- 797D82
- 7C7E81
- 7E7F81
Harmonie kolorów
Komplementarna +180°
- 6A7786
Cypress Grey Blue
- 807364
≈ Rye Dough Brown
Analogowa -30° +30°
- 6A7786
Cypress Grey Blue
- 647A82
≈ Gravel Grey Blue
- 737486
≈ Ash Mauve
Triada +120° +240°
- 6A7786
Cypress Grey Blue
- 856F71
≈ Sandstone Red Grey
- 6F7968
≈ Fir Spruce Green
Komplementarna rozszczepiona +150° +210°
- 6A7786
Cypress Grey Blue
- 857169
≈ Bradford Brown
- 797664
≈ Dull Olive
Tetrada +90° +180° +270°
- 6A7786
Cypress Grey Blue
- 826F7A
≈ Mysteria
- 807364
≈ Rye Dough Brown
- 677B71
≈ Cypress Garden
Kontrast i dostępność
Ag
AANa bieli
WCAG 4.56:1 · APCA Lc 72
Ag
AANa czerni
WCAG 4.59:1 · APCA Lc 30
Najlepszy kolor tekstu: #000000
WCAG 4.59:1 (AA) · APCA Lc 30
Contrast pairs
Fragmenty kodu
CSS
:root {
--cypress-grey-blue: #6a7786;
--cypress-grey-blue-rgb: 106 119 134;
--cypress-grey-blue-oklch: oklch(0.564 0.028 252.1);
}
.element {
color: var(--cypress-grey-blue);
background-color: hsl(212 12% 47%);
border-color: oklch(0.564 0.028 252.1);
}Tailwind CSS v4
@theme {
--color-cypress-grey-blue: #6a7786;
--color-cypress-grey-blue-50: #f0f6fd;
--color-cypress-grey-blue-100: #e2e9f1;
--color-cypress-grey-blue-200: #ccd5e0;
--color-cypress-grey-blue-300: #aeb8c6;
--color-cypress-grey-blue-400: #93a0af;
--color-cypress-grey-blue-500: #798899;
--color-cypress-grey-blue-600: #677381;
--color-cypress-grey-blue-700: #525c67;
--color-cypress-grey-blue-800: #3b434c;
--color-cypress-grey-blue-900: #292e35;
--color-cypress-grey-blue-950: #161b20;
}SCSS
$cypress-grey-blue: #6a7786;
$cypress-grey-blue-rgb: 106, 119, 134;
$cypress-grey-blue-light: mix(#fff, $cypress-grey-blue, 20%);
$cypress-grey-blue-dark: mix(#000, $cypress-grey-blue, 20%);
.element {
color: $cypress-grey-blue;
box-shadow: 0 0 0 2px rgba($cypress-grey-blue, 0.35);
}