ColorSwap

Preview readyOrbit dashboardStatic HTML

Start here

Bring your own site

Safe importPrivate network addresses, scripts and oversized responses are blocked.

Start from an example

HTML

<div class="app-shell">
  <aside class="sidebar">
    <a class="brand" href="#"><span class="brand-mark">O</span> Orbit</a>
    <nav>
      <a class="active" href="#overview">Overview</a>
      <a href="#reports">Reports</a>
      <a href="#audience">Audience</a>
      <a href="#automations">Automations</a>
    </nav>
    <div class="side-card"><span>Workspace usage</span><strong>72%</strong><div class="meter"><i></i></div><small>14 days left</small></div>
    <button class="profile"><span>ML</span><b>Maya Lin</b><small>Admin</small></button>
  </aside>
  <main class="content" id="overview">
    <header class="topbar"><div><p class="kicker">MONDAY, JULY 20</p><h1>Good morning, Maya</h1></div><button class="ghost">Export report</button><button class="primary">Create insight</button></header>
    <section class="hero-card"><div><span class="pill">LIVE OVERVIEW</span><h2>Your product is growing<br>in the right places.</h2><p>Activation is up 18.4% this month. Explore the signals driving your strongest cohort.</p><button class="hero-action">View growth report →</button></div><div class="hero-chart"><span class="chart-label">ACTIVATION</span><strong>78.6%</strong><div class="bars"><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div><small>+18.4% from last month</small></div></section>
    <section class="stats"><article><span>Monthly active</span><strong>24,892</strong><small class="positive">↑ 12.8%</small></article><article><span>New accounts</span><strong>3,140</strong><small class="positive">↑ 8.2%</small></article><article><span>Conversion</span><strong>6.84%</strong><small class="neutral">→ 0.4%</small></article></section>
    <section class="lower-grid"><article class="panel"><div class="panel-head"><div><span>Acquisition</span><h3>Where people find you</h3></div><button class="menu">•••</button></div><div class="source-row"><b><i class="dot purple"></i>Organic search</b><span>9,842</span><div class="track"><i style="width:82%"></i></div></div><div class="source-row"><b><i class="dot teal"></i>Direct</b><span>6,218</span><div class="track"><i style="width:58%"></i></div></div><div class="source-row"><b><i class="dot amber"></i>Referrals</b><span>3,971</span><div class="track"><i style="width:39%"></i></div></div></article><article class="panel activity"><div class="panel-head"><div><span>Activity</span><h3>Recent signals</h3></div></div><p><i class="event-icon">↗</i><span><b>Conversion milestone</b><small>Checkout reached 7% · 8m ago</small></span></p><p><i class="event-icon">◎</i><span><b>New segment ready</b><small>Power users · 42m ago</small></span></p><p><i class="event-icon">+</i><span><b>1,000 new users</b><small>July cohort · 2h ago</small></span></p></article></section>
  </main>
</div>

CSS

body {
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  margin: 0;
  background: #f6f7fb;
  color: #16181d;
  font-size: 14px;
}
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 220px 1fr; }
.sidebar { background: #16181d; color: #ffffff; padding: 24px 18px; display: flex; flex-direction: column; gap: 28px; }
.brand { display: flex; align-items: center; gap: 10px; color: #ffffff; text-decoration: none; font-size: 20px; font-weight: 750; }
.brand-mark { width: 29px; height: 29px; border-radius: 9px; display: grid; place-items: center; background: #6d5dfc; font-size: 14px; }
.sidebar nav { display: grid; gap: 6px; }
.sidebar nav a { color: #9da3ae; padding: 10px 12px; border-radius: 8px; text-decoration: none; font-weight: 600; }
.sidebar nav a.active { background: #292d35; color: #ffffff; }
.side-card { margin-top: auto; background: #22262e; border: 1px solid #343944; border-radius: 12px; padding: 14px; display: grid; grid-template-columns: 1fr auto; gap: 8px; color: #aeb4bf; font-size: 12px; }
.side-card strong { color: #ffffff; }.side-card small { color: #777f8d; }.meter { grid-column: 1/-1; height: 5px; border-radius: 9px; background: #3a3f49; overflow: hidden; }.meter i { display: block; width: 72%; height: 100%; background: #6d5dfc; }
.profile { border: 0; border-top: 1px solid #343944; padding: 18px 0 0; background: none; color: #ffffff; display: grid; grid-template-columns: 34px 1fr; text-align: left; gap: 0 10px; }.profile > span { grid-row: 1/3; background: #f0a661; color: #4d2805; border-radius: 50%; width: 34px; height: 34px; display: grid; place-items: center; font-size: 11px; font-weight: 800; }.profile small { color: #7e8795; }
.content { padding: 30px 34px 40px; max-width: 1200px; width: 100%; box-sizing: border-box; }
.topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
}
.topbar > div { margin-right: auto; }.topbar h1 { margin: 2px 0 0; font-size: 24px; letter-spacing: -0.03em; }.kicker { margin: 0; color: #8b93a1; font-size: 10px; letter-spacing: .12em; font-weight: 750; }
button { font: inherit; cursor: pointer; }.primary,.ghost,.hero-action { border-radius: 8px; padding: 10px 14px; font-weight: 700; }.primary { background: #5b5bd6; border: 1px solid #5b5bd6; color: #ffffff; }.ghost { background: #ffffff; border: 1px solid #dfe3eb; color: #363b45; }
.hero-card { display: grid; grid-template-columns: 1.35fr .65fr; gap: 24px; background: #5b5bd6; color: #ffffff; border-radius: 18px; padding: 30px; overflow: hidden; position: relative; }.hero-card:after { content:""; position:absolute; width:300px; height:300px; border:1px solid rgba(255,255,255,.12); border-radius:50%; right:-130px; top:-140px; }.hero-card h2 { font-size: 31px; line-height: 1.08; letter-spacing: -.04em; margin: 14px 0 12px; }.hero-card p { color: #dedcff; max-width: 540px; line-height: 1.6; }.pill { font-size: 10px; letter-spacing: .1em; font-weight: 800; background: rgba(255,255,255,.14); padding: 6px 8px; border-radius: 99px; }.hero-action { border: 0; background: #ffffff; color: #3c36a8; margin-top: 8px; }.hero-chart { background: rgba(23,20,80,.28); border: 1px solid rgba(255,255,255,.14); border-radius: 14px; padding: 20px; align-self: stretch; display: flex; flex-direction: column; }.chart-label { font-size: 10px; letter-spacing: .12em; color: #c9c5ff; }.hero-chart strong { font-size: 30px; margin: 8px 0 18px; }.hero-chart small { color: #c9c5ff; }.bars { height: 70px; display: flex; align-items: flex-end; gap: 7px; margin-bottom: 12px; }.bars i { flex: 1; border-radius: 4px 4px 1px 1px; background: #a9fff0; }.bars i:nth-child(1){height:25%}.bars i:nth-child(2){height:43%}.bars i:nth-child(3){height:38%}.bars i:nth-child(4){height:64%}.bars i:nth-child(5){height:55%}.bars i:nth-child(6){height:80%}.bars i:nth-child(7){height:94%}
.stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin: 16px 0; }.stats article,.panel { background: #ffffff; border: 1px solid #dfe3eb; border-radius: 13px; padding: 18px; }.stats article { display: grid; grid-template-columns: 1fr auto; gap: 8px; }.stats article > span { grid-column: 1/-1; color: #737b89; }.stats strong { font-size: 24px; }.stats small { align-self: center; font-weight: 700; }.positive { color: #0f8b67; }.neutral { color: #7a8290; }
.lower-grid { display: grid; grid-template-columns: 1.3fr .7fr; gap: 16px; }.panel-head { display: flex; align-items: start; justify-content: space-between; margin-bottom: 18px; }.panel-head span { color: #8b93a1; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }.panel h3 { margin: 4px 0 0; font-size: 17px; }.menu { border: 0; background: #f3f4f7; border-radius: 6px; color: #727986; }.source-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin: 14px 0; }.source-row b { font-size: 12px; }.source-row > span { color: #697181; font-size: 12px; }.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; }.purple { background:#5b5bd6}.teal{background:#0f9f8f}.amber{background:#d97706}.track { grid-column: 1/-1; height: 5px; background: #edf0f4; border-radius: 9px; overflow: hidden; }.track i { display:block; height:100%; background:#5b5bd6; border-radius:9px; }.activity p { display:flex; gap:10px; align-items:center; border-top:1px solid #edf0f4; padding:12px 0; margin:0; }.activity p span { display:grid; gap:2px; }.activity small { color:#89909d}.event-icon{width:28px;height:28px;border-radius:8px;background:#f0efff;color:#5b5bd6;display:grid;place-items:center;font-style:normal;font-weight:800}
@media(max-width:760px){.app-shell{grid-template-columns:1fr}.sidebar{display:none}.content{padding:20px}.hero-card,.lower-grid{grid-template-columns:1fr}.stats{grid-template-columns:1fr}.topbar{flex-wrap:wrap}.topbar>div{width:100%}}

Orbit dashboard38 colors detected

Project-aware previewUploaded app code runs in an isolated browser runtime—never on our server.

Preparing preview…

Semantic system

Color direction

Live

Active systemStudio Ink

Balanced

Your interface, in context.

Text, surface, border, and hierarchy.

Clear violet with calm supporting tones.

Curated directions10 systems

Company-inspired library 20

Adapted semantic systems based on public color references. They use no logos and do not imply endorsement or affiliation.

Edit core roles

Background1 uses

Surface23 uses

Text5 uses

Muted text7 uses

Primary12 uses

Secondary6 uses

Accent8 uses

Border7 uses

Feedback and focus states

Success

Warning

Error

Focus ring

Text/background 16.6:1On primary 5.4:1WCAG live check

Source color mapping38

Every detected literal is mapped to a semantic role. Override any source color below.

#f6f7fb×1

#16181d×2

#ffffff×10

ffffff×10

#6d5dfc×2

#9da3ae×1

#292d35×1

#22262e×1

#343944×2

#aeb4bf×1

#777f8d×1

#3a3f49×1

#f0a661×1

#4d2805×1

#7e8795×1

#8b93a1×2

#5b5bd6×6

#dfe3eb×2

#363b45×1

rgba(255,255,255,.12)×1

#dedcff×1

dedcff×1

rgba(255,255,255,.14)×2

#3c36a8×1

rgba(23,20,80,.28)×1

#c9c5ff×2

#a9fff0×1

#737b89×1

#0f8b67×1

#7a8290×1

#f3f4f7×1

#727986×1

#697181×1

#0f9f8f×1

#d97706×1

#edf0f4×2

#89909d×1

#f0efff×1