Skip to content
prfct

Theme builder

prfct ships black and white. Give it your two brand colors, a neutral and a radius: every scale is regenerated for both modes and the contrast of every text step is solved again, so whatever you pick stays accessible.

Preview

Light
Pro
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
Pro
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 CSS96 lines
/* prfct theme */
:root {
  --radius: 0.5rem;
}

:root,
.light {
  --gray-1: oklch(0.992 0 0);
  --gray-2: oklch(0.979 0 0);
  --gray-3: oklch(0.958 0 0);
  --gray-4: oklch(0.936 0 0);
  --gray-5: oklch(0.913 0 0);
  --gray-6: oklch(0.889 0 0);
  --gray-7: oklch(0.853 0 0);
  --gray-8: oklch(0.789 0 0);
  --gray-9: oklch(0.64 0 0);
  --gray-10: oklch(0.604 0 0);
  --gray-11: oklch(0.5 0 0);
  --gray-12: oklch(0.228 0 0);
  --gray-contrast: oklch(0.2 0 0);
  --gray-focus: oklch(0.64 0 0);
  --brand-1: oklch(0.992 0 0);
  --brand-2: oklch(0.979 0 0);
  --brand-3: oklch(0.958 0 0);
  --brand-4: oklch(0.936 0 0);
  --brand-5: oklch(0.913 0 0);
  --brand-6: oklch(0.889 0 0);
  --brand-7: oklch(0.853 0 0);
  --brand-8: oklch(0.789 0 0);
  --brand-9: oklch(0.228 0 0);
  --brand-10: oklch(0.308 0 0);
  --brand-11: oklch(0.228 0 0);
  --brand-12: oklch(0.228 0 0);
  --brand-contrast: oklch(1 0 0);
  --brand-focus: oklch(0.228 0 0);
  --brand-secondary-1: oklch(0.992 0 0);
  --brand-secondary-2: oklch(0.979 0 0);
  --brand-secondary-3: oklch(0.958 0 0);
  --brand-secondary-4: oklch(0.936 0 0);
  --brand-secondary-5: oklch(0.913 0 0);
  --brand-secondary-6: oklch(0.889 0 0);
  --brand-secondary-7: oklch(0.853 0 0);
  --brand-secondary-8: oklch(0.789 0 0);
  --brand-secondary-9: oklch(0.228 0 0);
  --brand-secondary-10: oklch(0.308 0 0);
  --brand-secondary-11: oklch(0.228 0 0);
  --brand-secondary-12: oklch(0.228 0 0);
  --brand-secondary-contrast: oklch(1 0 0);
  --brand-secondary-focus: oklch(0.228 0 0);
}

.dark {
  --gray-1: oklch(0.158 0 0);
  --gray-2: oklch(0.192 0 0);
  --gray-3: oklch(0.226 0 0);
  --gray-4: oklch(0.256 0 0);
  --gray-5: oklch(0.285 0 0);
  --gray-6: oklch(0.32 0 0);
  --gray-7: oklch(0.374 0 0);
  --gray-8: oklch(0.466 0 0);
  --gray-9: oklch(0.53 0 0);
  --gray-10: oklch(0.575 0 0);
  --gray-11: oklch(0.768 0 0);
  --gray-12: oklch(0.952 0 0);
  --gray-contrast: oklch(1 0 0);
  --gray-focus: oklch(0.575 0 0);
  --brand-1: oklch(0.158 0 0);
  --brand-2: oklch(0.192 0 0);
  --brand-3: oklch(0.226 0 0);
  --brand-4: oklch(0.256 0 0);
  --brand-5: oklch(0.285 0 0);
  --brand-6: oklch(0.32 0 0);
  --brand-7: oklch(0.374 0 0);
  --brand-8: oklch(0.466 0 0);
  --brand-9: oklch(0.952 0 0);
  --brand-10: oklch(0.892 0 0);
  --brand-11: oklch(0.952 0 0);
  --brand-12: oklch(0.952 0 0);
  --brand-contrast: oklch(0.158 0 0);
  --brand-focus: oklch(0.892 0 0);
  --brand-secondary-1: oklch(0.158 0 0);
  --brand-secondary-2: oklch(0.192 0 0);
  --brand-secondary-3: oklch(0.226 0 0);
  --brand-secondary-4: oklch(0.256 0 0);
  --brand-secondary-5: oklch(0.285 0 0);
  --brand-secondary-6: oklch(0.32 0 0);
  --brand-secondary-7: oklch(0.374 0 0);
  --brand-secondary-8: oklch(0.466 0 0);
  --brand-secondary-9: oklch(0.952 0 0);
  --brand-secondary-10: oklch(0.892 0 0);
  --brand-secondary-11: oklch(0.952 0 0);
  --brand-secondary-12: oklch(0.952 0 0);
  --brand-secondary-contrast: oklch(0.158 0 0);
  --brand-secondary-focus: oklch(0.892 0 0);
}