Color systems

UI Palette Tester

Import a palette, assign practical interface roles, and review contrast in a live page preview.

1Add source
2Adjust
3Export

Local files stay in this browser

UI Palette Tester

Instant Landing Page Color Preview

Change palette order and swatches to see the mock landing page update in real time.

Image Color Intake

Drag and drop image, image URL, or color codes here

Top colors

Color Wheel

Pick a color and apply it directly to a palette slot.

#14B8A6Slot

Palette Controls

BackgroundLayoutNav Style

Border Outlines

#0B132BBackground
#1C2541Surface
#3A506BPrimary
#5BC0BEAccent
#EAFDFCSupport

Copy Design Code

CSS

:root {
  --ui-bg: #0B132B;
  --ui-surface: #1C2541;
  --ui-primary: #3A506B;
  --ui-accent: #5BC0BE;
  --ui-soft: #EAFDFC;
  --ui-text: #F8FAFC;
}

.ui-preview {
  color: var(--ui-text);
  background: linear-gradient(160deg, #0B132B 0%, #1C2541 55%, #3A506B 100%);
}

.ui-card {
  background: var(--ui-surface);
  border: 2px solid #EAFDFCB3;
}

.ui-primary-btn {
  background: var(--ui-primary);
  color: #F8FAFC;
}

.ui-accent-block {
  background: var(--ui-accent);
  color: #0B1220;
}

JSON

{
  "palette": [
    "#0B132B",
    "#1C2541",
    "#3A506B",
    "#5BC0BE",
    "#EAFDFC"
  ],
  "style": {
    "backgroundStyle": "gradient",
    "layoutStyle": "split",
    "navStyle": "pill",
    "showBorderOutlines": true
  },
  "roles": {
    "bg": "#0B132B",
    "surface": "#1C2541",
    "primary": "#3A506B",
    "accent": "#5BC0BE",
    "soft": "#EAFDFC",
    "text": "#F8FAFC",
    "textMuted": "#F8FAFC",
    "surfaceText": "#F8FAFC",
    "primaryText": "#F8FAFC",
    "accentText": "#0B1220"
  }
}

OnTheBlock.Studio

UI Mock Landing

Find your winning palette before writing production CSS.

Reorder colors in the palette panel to instantly re-map background, surface, primary and accent roles across this mock page.

KPI Snapshot

+28.4%

Conversion lift after palette refresh.

Primary CTA Block

This card uses the third palette slot as primary brand emphasis.

Accent Module

The fourth slot drives highlights and conversion points.