CDRN

Генерувати гармонійну кольорову палітру

  • Панель керування
  • Документація
  • API
Генерує гармонійні кольорові палітри відповідно до бажаної кількості кольорів та обраного правила кольорів, наприклад доповнювальні, аналогічні, тріадні тощо.

Як використовувати інструмент генерації кольорової палітри?

Вкажіть бажану кількість кольорів та правило кольорів у формі. Ви можете використовувати згенеровані палітри у своїх проектах, слідуючи прикладу.

Перший параметр визначає основний колір.

Другий параметр визначає кількість кольорів. Зверніть увагу, що залежно від обраного правила, вибір кількості може не враховуватися.

Третій параметр визначає правило кольорів для використання (доповнювальні, аналогічні, тріадні тощо).

Приклади палітр

Монохроматична палітра

<div class="p-4" style="background-color: #ff5733;"></div>
<div class="p-4" style="background-color: #ffab99;"></div>
<div class="p-4" style="background-color: #ffffff;"></div>

Аналогічна палітра

<div class="p-4" style="background-color: #ff5733;"></div>
<div class="p-4" style="background-color: #ffbb32;"></div>
<div class="p-4" style="background-color: #dcff32;"></div>

Тріадна палітра

<div class="p-4" style="background-color: #ff5733;"></div>
<div class="p-4" style="background-color: #32ff54;"></div>
<div class="p-4" style="background-color: #5432ff;"></div>

Часті запитання

Яке правило палітри обрати для фірмового стилю?

Монохроматична палітра дає спокійний і професійний вигляд, ідеальна для корпоративних або редакційних сайтів. Аналогічні пропонують м'яку, природну варіацію, корисну для зелених або океанічних атмосфер. Правило доповнювальних або тріадних кольорів забезпечує сильний контраст, ідеальний для CTA і e-commerce сайтів, які хочуть привернути увагу.

Чому запитана кількість кольорів не завжди дотримується?

Деякі правила визначають фіксовану кількість кольорів. Доповнювальна палітра завжди повертає 2 кольори (відтінок та його протилежність на хроматичному колесі), тріадна - 3, тетрадна - 4. Параметр кількості враховується лише для правил монохроматичний та аналогічний.

Обчислення виконується у HSL чи RGB?

Генерація ґрунтується на просторі HSL, більш природному для маніпуляції відтінком (обертання на хроматичному колесі) та яскравістю. Повернуті кольори потім конвертуються у формат HEX для прямої інтеграції у CSS. Якщо вам потрібен формат RGB, використовуйте конвертер кольорів для кожного згенерованого коду.

Як пов'язати згенеровану палітру з існуючим зображенням?

Спочатку витягніть домінантний колір вашого зображення через екстрактор палітри, візьміть основний відтінок як референсний колір, потім введіть його у генератор з аналогічним або тріадним правилом. Ви отримаєте таким чином кольори, узгоджені з вашим візуальним рядом для оздоблення решти сайту.

Чи відповідають згенеровані палітри нормам доступності WCAG?

Генератор не перевіряє коефіцієнти контрасту. Колір стає доступним лише у відношенні до іншого кольору фону. Для валідації пари текст/фон, експортуйте коди HEX і використовуйте засіб перевірки контрасту, який обчислює коефіцієнт відповідно до вимог WCAG (4.5:1 для звичайного тексту у AA, 7:1 у AAA).

Чи можна експортувати палітру у певному форматі?

Палітра повертається у кодах HEX, готових для вставки у CSS-файл, файл змінних SASS, тему Tailwind або систему дизайн-токенів. Для отримання еквівалентів RGB або HSL, передайте кожен код у конвертер кольорів.

Приклад запиту

curl -X POST https://cdrn.fr/api/v1/tools/color-generator/execute \
  -H "Content-Type: application/json" \
  -d '{"color_base":"...","quantity":1,"rules":"complementary"}'

Схема вхідних даних

Поле Тип Обов'язкове За замовчуванням
color_base string ✓ –
quantity integer ✓ –
rules choice (complementary, analogous, triadic, tetradic, monochromatic, shade, split_complementary) ✓ –

Точки доступу

  • GET https://cdrn.fr/api/v1/tools - перелічує всі доступні інструменти
  • GET https://cdrn.fr/api/v1/tools/color-generator - отримує схему цього інструменту
  • POST https://cdrn.fr/api/v1/tools/color-generator/execute - виконує цей інструмент з JSON-payload