Skip to content
prfct.dev

Theme builder

Make prfct yours — without breaking it.

Change the brand hue, the neutral tint and the radius. Every scale is regenerated for both modes and every text step is re-solved for contrast, so whatever you pick stays accessible.

Light
Live
Workspace
Update how your team works.
Bandwidth72 of 100 GB
x
Concurrency
Trial ends in 3 days
Add a payment method to keep your workspace.
ALGHKJ
PassedDegradedFailedQueuedDraft

Every control above reads its color from the theme you're building.

Dark
Live
Workspace
Update how your team works.
Bandwidth72 of 100 GB
x
Concurrency
Trial ends in 3 days
Add a payment method to keep your workspace.
ALGHKJ
PassedDegradedFailedQueuedDraft

Every control above reads its color from the theme you're building.

Generated CSS63 lines
/* 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);
}