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 и сайтове за електронна търговия, които искат да привлекат вниманието.

Защо заявеният брой цветове не винаги се спазва?

Някои правила налагат фиксиран брой цветове. Една допълваща палитра винаги връща 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