Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

update(CSS): web/css/color_value #2504

Merged
merged 8 commits into from
Jan 6, 2024
Merged

update(CSS): web/css/color_value #2504

Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
ec3ad26
update(CSS): web/css/color_value
undead404 Nov 19, 2023
e76536b
Merge branch 'master' into update/web-css-color_value
undead404 Nov 23, 2023
12c17b8
Merge branch 'master' into update/web-css-color_value
undead404 Nov 24, 2023
d5d6fa4
Merge branch 'master' into update/web-css-color_value
undead404 Nov 27, 2023
8f05d00
update(CSS): web/css/color_value
undead404 Nov 27, 2023
e6f9a77
update(CSS): web/css/color_value
undead404 Dec 21, 2023
304b89b
Merge branch 'master' into update/web-css-color_value
undead404 Jan 3, 2024
4c80800
update(CSS): web/css/color_value
undead404 Jan 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 8 additions & 3 deletions files/uk/web/css/color_value/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ rgb(255 0 153 / 80%)

/* HSL (Hue, Saturation, Lightness – барва, насиченість, світлість) */
hsl(150 30% 60%)
hsl(150 30% 60% / 0.8)
hsl(150 30% 60% / 80%)

/* HWB (Hue, Whiteness, Blackness – барва, білизна, чорнота) */
hwb(12 50% 0%)
Expand All @@ -50,6 +50,10 @@ oklab(59% 0.1 0.1 / 0.5)
/* Oklch (Lightness, Chroma, Hue – світлість, інтенсивність, барва) */
oklch(60% 0.15 50)
oklch(60% 0.15 50 / 0.5)

/* light-dark */
light-dark(white, black)
light-dark(rgb(255 255 255), rgb(0 0 0))
```

Значення `<color>` можна задати за допомогою одного з методів, перелічених нижче:
Expand All @@ -62,6 +66,7 @@ oklch(60% 0.15 50 / 0.5)
- Колірного простору [Oklab](https://bottosson.github.io/posts/oklab/): {{CSSXref("color_value/oklab", "oklab()")}}, {{CSSXref("color_value/oklch", "oklch()")}};
- Інших колірних просторів: {{CSSXref("color_value/color", "color()")}}.
- Шляхом змішування двох кольорів: {{CSSXref("color_value/color-mix", "color-mix()")}}.
- Шляхом задання двох кольорів, перший з яких використовується для світлих колірних палітр, а другий – для темних: {{CSSXref("color_value/light-dark", "light-dark()")}}.

### Ключове слово currentcolor

Expand Down Expand Up @@ -133,7 +138,7 @@ color-mix(in oklch, oklch(60% 0.2 10), oklch(60% 0.2 30))
Наприклад:

- `X` (`0.2`) у `color(xyz 0.2 0.1 0.6)` – аналогічна щодо `R` (`50%`) у `rgb(50% 70% 30%)`.
- `H` (`0deg`) у `hsl(0deg 100% 80%)` – аналогічна щодо `H` (`140`) у `oklch(80% 0.1 140)`.
- `H` (`0deg`) у `hsl(0deg 100% 80%)` – аналогічна щодо `H` (`140`) в `oklch(80% 0.1 140)`.

Використання Oklch як колірного простору інтерполяції та два кольори нижче - як приклад:

Expand Down Expand Up @@ -174,7 +179,7 @@ color(display-p3 0.7 0.5 none)
oklch(63.612% 0.1522 78.748)
```

## Міркування щодо доступності
## Занепокоєння щодо доступності

Частина людей має проблеми з розрізненням кольорів. Рекомендація [WCAG 2.2](/uk/docs/Web/Accessibility/Understanding_WCAG/Perceivable/Use_of_color) наполегливо радить не використовувати колір як єдиний засіб донесення певного повідомлення, дії чи результату. Дивіться подробиці в [кольорі та колірному контрасті](/uk/docs/Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast).

Expand Down