Przejdź do treści
prfct.dev

Kreator motywów

Dopasuj prfct do siebie — niczego nie psując.

Zmień odcień marki, temperaturę szarości i promień zaokrągleń. Każda skala jest generowana na nowo dla obu trybów, a kontrast każdego stopnia tekstu wyliczany od początku — więc cokolwiek wybierzesz, pozostanie dostępne.

Jasny
Na żywo
Przestrzeń robocza
Dostosuj sposób pracy zespołu.
Transfer72 ze 100 GB
x
Współbieżność
Okres próbny kończy się za 3 dni
Dodaj metodę płatności, aby zachować przestrzeń roboczą.
ALGHKJ
ZaliczoneZakłóceniaNieudaneW kolejceSzkic

Każda kontrolka powyżej pobiera kolor z motywu, który tworzysz.

Ciemny
Na żywo
Przestrzeń robocza
Dostosuj sposób pracy zespołu.
Transfer72 ze 100 GB
x
Współbieżność
Okres próbny kończy się za 3 dni
Dodaj metodę płatności, aby zachować przestrzeń roboczą.
ALGHKJ
ZaliczoneZakłóceniaNieudaneW kolejceSzkic

Każda kontrolka powyżej pobiera kolor z motywu, który tworzysz.

Wygenerowany CSS63 linie
/* prfct theme — brand: ultramarine, neutral: graphite, radius: 0.5rem */
:root {
  --radius: 0.5rem;
}

:root {
  --gray-1: oklch(0.992 0.002 264);
  --gray-2: oklch(0.979 0.0026 264);
  --gray-3: oklch(0.958 0.0036 264);
  --gray-4: oklch(0.936 0.0042 264);
  --gray-5: oklch(0.913 0.0049 264);
  --gray-6: oklch(0.889 0.0055 264);
  --gray-7: oklch(0.853 0.0062 264);
  --gray-8: oklch(0.789 0.0065 264);
  --gray-9: oklch(0.64 0.0065 264);
  --gray-10: oklch(0.604 0.0065 264);
  --gray-11: oklch(0.5 0.0059 264);
  --gray-12: oklch(0.228 0.0049 264);
  --gray-contrast: oklch(0.2 0.002 264);
  --brand-1: oklch(0.993 0.0032 267);
  --brand-2: oklch(0.981 0.0089 267);
  --brand-3: oklch(0.961 0.0183 267);
  --brand-4: oklch(0.938 0.0294 267);
  --brand-5: oklch(0.909 0.0436 267);
  --brand-6: oklch(0.872 0.0622 267);
  --brand-7: oklch(0.82 0.0894 267);
  --brand-8: oklch(0.745 0.1304 267);
  --brand-9: oklch(0.515 0.24 267);
  --brand-10: oklch(0.48 0.2352 267);
  --brand-11: oklch(0.5 0.216 267);
  --brand-12: oklch(0.315 0.1008 267);
  --brand-contrast: oklch(1 0 0);
}

.dark {
  --gray-1: oklch(0.158 0.0052 264);
  --gray-2: oklch(0.192 0.0055 264);
  --gray-3: oklch(0.226 0.0059 264);
  --gray-4: oklch(0.256 0.0062 264);
  --gray-5: oklch(0.285 0.0065 264);
  --gray-6: oklch(0.32 0.0065 264);
  --gray-7: oklch(0.374 0.0065 264);
  --gray-8: oklch(0.466 0.0065 264);
  --gray-9: oklch(0.53 0.0065 264);
  --gray-10: oklch(0.575 0.0065 264);
  --gray-11: oklch(0.768 0.0049 264);
  --gray-12: oklch(0.952 0.0026 264);
  --gray-contrast: oklch(1 0 0);
  --brand-1: oklch(0.178 0.024 267);
  --brand-2: oklch(0.206 0.0312 267);
  --brand-3: oklch(0.262 0.0768 267);
  --brand-4: oklch(0.304 0.1104 267);
  --brand-5: oklch(0.346 0.1248 267);
  --brand-6: oklch(0.392 0.1344 267);
  --brand-7: oklch(0.45 0.1488 267);
  --brand-8: oklch(0.525 0.1728 267);
  --brand-9: oklch(0.55 0.24 267);
  --brand-10: oklch(0.59 0.2227 267);
  --brand-11: oklch(0.74 0.1332 267);
  --brand-12: oklch(0.915 0.0406 267);
  --brand-contrast: oklch(1 0 0);
}