Kolor, który nie zdradza — jak zbudowałem paletę lucdoro.design

Kiedy zaczynasz projekt sam, bez art-directora który cię zatrzyma, kolor to pierwsza rzecz która się psuje. Wybierasz coś na moment „modne", po tygodniu widzisz że wszyscy używają tego samego tealu, po miesiącu paleta ci się nudzi i chcesz przemalowywać wszystko od zera.

Dla lucdoro.design zrobiłem odwrotnie — najpierw wybrałem trzy kolory na całe życie studia, potem projektowałem pod nie.

Trzy kolory, nie trzynaście

Cała paleta LucDoroDesign to:

• Fiolet #7b4dff — primary, do CTA, akcentów, hover state
• Zielony #1DB954 — secondary, do outline typography i decor
• Kremowy off-white #f5f2ea — bg jasnego motywu

Plus czarny #0d0d10 na dark mode. Nic więcej. Nie mam palety pomocniczej „na cieniowanie", nie mam gradientów poza jednym w hero. Cała reszta robi się z kombinacji tych czterech + opacity.

Ograniczenie to nie ubytek. Ograniczenie to dyscyplina, która pozwala nie tracić 40 minut na wybór odcienia niebieskiego.

Dlaczego akurat te?

Fiolet — bo nikt w mojej branży w Polsce go nie używa. Wszyscy jadą na czarno-biało + akcent w cieplej gamie (rust, terracotta, mustard). Fiolet oddziela mnie w portfolio-review już z pierwszego skrolla.

Zielony — jako druga „mocna" barwa nie klasyczne uzupełnienie fioletu (tym byłoby żółte-złoto). Wybrałem Spotify green — bo działa jako accent na outline typography (Fraunces italic) i jednocześnie jest kojarzony z „ok / done / tech".

Off-white kremowy zamiast czystej bieli — bo #FFFFFF na monitorach OLED wypala oczy, a design studio które ma stronę bolącą do oglądania nie sprzeda usług projektowych.

Test twardy — dark mode

Ważny sanity-check każdej palety: czy działa w dark mode bez dodawania nowych kolorów? Moja odpowiedź to system zmiennych CSS:

:root{
  --acc: #7b4dff;  /* light */
  --bg:  #f5f2ea;
  --txt: #1a1a1e;
}
[data-theme="dark"]{
  --acc: #b58cff;  /* jaśniejszy fiolet */
  --bg:  #0d0d10;
  --txt: #f2efe8;
}

Jedyna zmiana: fiolet w dark mode jest jaśniejszy (#b58cff zamiast #7b4dff) — bo na czarnym tle ciemny fiolet znika w tło. Reszta to inwersja.

Paleta jako system, nie zbiór

Dodałem też 5 alternatywnych palet jako opcje dla usera (Ocean, Sunset, Sky, Milano, Neon) — każda z tym samym systemem zmiennych. Kliknięcie w ikonę ◐ w headerze zmienia całą stronę. To nie gimmick — to dowód że system palety działa, że nie jest zależny od konkretnego fioletu.

PS. Zielony #1DB954 ukradłem Spotify. Nie przepraszam. Kolor to nie licencja, to zestaw współrzędnych w przestrzeni RGB. Jak wygląda dobrze — bierz.