CDRN

Wygeneruj harmonijną paletę kolorów

  • Panel
  • Dokumentacja
  • API
tworzy harmonijne palety kolorów na podstawie liczby kolorów i reguły harmonii (dopełniające, analogiczne, triadyczne itd.).

Jak korzystać z narzędzia do generowania palety kolorów?

Określ pożądaną liczbę kolorów i regułę kolorów w formularzu. Możesz używać wygenerowanych palet w swoich projektach zgodnie z przykładem.

Pierwszy parametr definiuje kolor główny.

Drugi parametr definiuje liczbę kolorów. Zauważ, że w zależności od wybranej reguły, wybór ilości może nie zostać uwzględniony.

Trzeci parametr definiuje regułę kolorów do użycia (dopełniające, analogiczne, triadyczne itp.).

Przykłady palet

Paleta monochromatyczna

<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>

Paleta analogiczna

<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>

Paleta triadyczna

<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>

Najczęściej zadawane pytania

Jaką regułę palety wybrać dla identyfikacji wizualnej?

Paleta monochromatyczna daje spokojny i profesjonalny rezultat, idealna dla stron korporacyjnych lub redakcyjnych. Analogiczne oferują łagodne, naturalne urozmaicenie, przydatne dla atmosfery zielonej lub oceanicznej. Reguła dopełniająca lub triadyczna wnosi silny kontrast, idealny dla CTA i sklepów internetowych, które chcą przyciągnąć uwagę.

Dlaczego żądana liczba kolorów nie zawsze jest respektowana?

Niektóre reguły narzucają stałą liczbę kolorów. Paleta dopełniająca zawsze zwraca 2 kolory (odcień i jego przeciwieństwo na kole barw), paleta triadyczna zwraca 3, tetradyczna zwraca 4. Parametr ilości jest respektowany tylko dla reguł monochromatycznej i analogicznej.

Czy obliczenia wykonywane są na HSL czy RGB?

Generowanie opiera się na przestrzeni HSL, bardziej naturalnej do manipulowania odcieniem (rotacja na kole barw) i jasnością. Zwracane kolory są następnie konwertowane na format HEX dla bezpośredniej integracji w CSS. Jeśli potrzebujesz formatu RGB, użyj konwertera kolorów dla każdego wygenerowanego kodu.

Jak skojarzyć wygenerowaną paletę z istniejącym obrazem?

Zacznij od wyciągnięcia dominującego koloru z twojego obrazu za pomocą ekstraktora palet, weź główny odcień jako kolor referencyjny, a następnie wprowadź go do generatora z regułą analogiczną lub triadyczną. Uzyskasz w ten sposób kolory spójne z twoim wizualem, aby ubrać resztę strony.

Czy wygenerowane palety są zgodne z normami WCAG?

Generator nie sprawdza współczynników kontrastu. Kolor staje się dostępny tylko w relacji z innym kolorem tła. Aby zweryfikować duet tekst/tło, wyeksportuj kody HEX i użyj weryfikatora kontrastu, który oblicza współczynnik zgodnie z wymaganiami WCAG (4.5:1 dla tekstu normalnego w AA, 7:1 w AAA).

Czy można wyeksportować paletę w określonym formacie?

Paleta jest zwracana w kodach HEX, gotowych do wklejenia w arkuszu CSS, w pliku zmiennych SASS, w motywie Tailwind lub w systemie tokenów projektowych. Aby uzyskać odpowiedniki RGB lub HSL, przekaż każdy kod do konwertera kolorów.

Przykładowe zapytanie

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

Schemat wejściowy

Pole Typ Wymagane Domyślnie
color_base string ✓ –
quantity integer ✓ –
rules choice (complementary, analogous, triadic, tetradic, monochromatic, shade, split_complementary) ✓ –

Punkty końcowe

  • GET https://cdrn.fr/api/v1/tools - lista wszystkich dostępnych narzędzi
  • GET https://cdrn.fr/api/v1/tools/color-generator - zwraca schemat dla tego narzędzia
  • POST https://cdrn.fr/api/v1/tools/color-generator/execute - uruchamia to narzędzie z payloadem JSON