Example color scheme with Maroon, yellow and...
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6. <title>Palette Demo Site</title>
  7. <style>
  8. :root {
  9. --deep-red-100: oklch(0.97 0.02 29);
  10. --deep-red-200: oklch(0.92 0.05 29);
  11. --deep-red-300: oklch(0.86 0.1 29);
  12. --deep-red-400: oklch(0.8 0.14 29);
  13. --deep-red-500: oklch(0.72 0.17 29);
  14. --deep-red-600: oklch(0.63 0.14 29);
  15. --deep-red-700: oklch(0.54 0.12 29);
  16. --deep-red-800: oklch(0.42 0.1 29);
  17. --deep-red-900: oklch(0.31 0.07 29);
  18.  
  19. --mustard-100: oklch(0.96 0.02 90);
  20. --mustard-200: oklch(0.92 0.05 90);
  21. --mustard-300: oklch(0.85 0.1 90);
  22. --mustard-400: oklch(0.79 0.14 90);
  23. --mustard-500: oklch(0.71 0.17 90);
  24. --mustard-600: oklch(0.61 0.14 90);
  25. --mustard-700: oklch(0.52 0.12 90);
  26. --mustard-800: oklch(0.41 0.1 90);
  27. --mustard-900: oklch(0.3 0.07 90);
  28.  
  29. --green-100: oklch(0.96 0.02 151);
  30. --green-200: oklch(0.91 0.05 151);
  31. --green-300: oklch(0.84 0.1 151);
  32. --green-400: oklch(0.77 0.14 151);
  33. --green-500: oklch(0.69 0.17 151);
  34. --green-600: oklch(0.6 0.14 151);
  35. --green-700: oklch(0.51 0.12 151);
  36. --green-800: oklch(0.4 0.1 151);
  37. --green-900: oklch(0.29 0.07 151);
  38.  
  39. --bg: var(--mustard-100);
  40. --surface: rgba(255,255,255,0.72);
  41. --surface-strong: white;
  42. --text: var(--deep-red-900);
  43. --text-soft: color-mix(in oklab, var(--deep-red-900) 72%, white);
  44. --border: color-mix(in oklab, var(--deep-red-300) 35%, white);
  45. --primary: var(--green-600);
  46. --primary-hover: var(--green-700);
  47. --secondary: var(--mustard-400);
  48. --accent: var(--deep-red-500);
  49. --shadow: color-mix(in oklab, var(--deep-red-900) 10%, transparent);
  50. }
  51.  
  52. * { box-sizing: border-box; }
  53.  
  54. body {
  55. margin: 0;
  56. font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  57. color: var(--text);
  58. background:
  59. radial-gradient(circle at top left, var(--mustard-200), transparent 30%),
  60. radial-gradient(circle at bottom right, var(--green-100), transparent 30%),
  61. linear-gradient(180deg, var(--mustard-100), #fff);
  62. }
  63.  
  64. a { color: inherit; text-decoration: none; }
  65.  
  66. .container {
  67. width: min(1120px, calc(100% - 2rem));
  68. margin: 0 auto;
  69. }
  70.  
  71. .nav {
  72. position: sticky;
  73. top: 0;
  74. backdrop-filter: blur(12px);
  75. background: rgba(255,255,255,0.65);
  76. border-bottom: 1px solid var(--border);
  77. z-index: 10;
  78. }
  79.  
  80. .nav-inner {
  81. display: flex;
  82. align-items: center;
  83. justify-content: space-between;
  84. padding: 1rem 0;
  85. gap: 1rem;
  86. }
  87.  
  88. .brand {
  89. font-weight: 800;
  90. letter-spacing: 0.02em;
  91. color: var(--deep-red-800);
  92. }
  93.  
  94. .nav-links {
  95. display: flex;
  96. gap: 1rem;
  97. color: var(--text-soft);
  98. font-weight: 600;
  99. }
  100.  
  101. .btn {
  102. display: inline-flex;
  103. align-items: center;
  104. justify-content: center;
  105. border: none;
  106. border-radius: 999px;
  107. padding: 0.85rem 1.2rem;
  108. font: inherit;
  109. font-weight: 700;
  110. cursor: pointer;
  111. transition: 160ms ease;
  112. }
  113.  
  114. .btn-primary {
  115. background: var(--primary);
  116. color: white;
  117. box-shadow: 0 10px 24px var(--shadow);
  118. }
  119.  
  120. .btn-primary:hover {
  121. background: var(--primary-hover);
  122. transform: translateY(-1px);
  123. }
  124.  
  125. .btn-secondary {
  126. background: var(--surface-strong);
  127. color: var(--deep-red-800);
  128. border: 1px solid var(--border);
  129. }
  130.  
  131. .hero {
  132. padding: 4rem 0 3rem;
  133. }
  134.  
  135. .hero-grid {
  136. display: grid;
  137. grid-template-columns: 1.2fr 0.8fr;
  138. gap: 2rem;
  139. align-items: center;
  140. }
  141.  
  142. .eyebrow {
  143. display: inline-block;
  144. font-size: 0.8rem;
  145. text-transform: uppercase;
  146. letter-spacing: 0.12em;
  147. font-weight: 800;
  148. color: var(--green-700);
  149. margin-bottom: 1rem;
  150. }
  151.  
  152. h1 {
  153. margin: 0 0 1rem;
  154. font-size: clamp(2.4rem, 6vw, 4.6rem);
  155. line-height: 0.95;
  156. color: var(--deep-red-900);
  157. }
  158.  
  159. .hero p {
  160. font-size: 1.05rem;
  161. color: var(--text-soft);
  162. max-width: 58ch;
  163. margin-bottom: 1.5rem;
  164. }
  165.  
  166. .hero-actions {
  167. display: flex;
  168. gap: 0.75rem;
  169. flex-wrap: wrap;
  170. margin-bottom: 1.25rem;
  171. }
  172.  
  173. .hero-stats {
  174. display: flex;
  175. gap: 1rem;
  176. flex-wrap: wrap;
  177. color: var(--text-soft);
  178. font-weight: 600;
  179. }
  180.  
  181. .mockup {
  182. background: linear-gradient(180deg, var(--surface), var(--surface-strong));
  183. border: 1px solid var(--border);
  184. border-radius: 28px;
  185. padding: 1.2rem;
  186. box-shadow: 0 25px 60px var(--shadow);
  187. }
  188.  
  189. .mockup-header {
  190. display: flex;
  191. gap: 0.5rem;
  192. margin-bottom: 1rem;
  193. }
  194.  
  195. .dot {
  196. width: 12px;
  197. height: 12px;
  198. border-radius: 50%;
  199. background: var(--deep-red-300);
  200. }
  201.  
  202. .dot:nth-child(2) { background: var(--mustard-400); }
  203. .dot:nth-child(3) { background: var(--green-400); }
  204.  
  205. .mockup-card {
  206. background: white;
  207. border: 1px solid var(--border);
  208. border-radius: 18px;
  209. padding: 1rem;
  210. margin-bottom: 0.8rem;
  211. }
  212.  
  213. .pill-row {
  214. display: flex;
  215. gap: 0.5rem;
  216. flex-wrap: wrap;
  217. margin-top: 0.8rem;
  218. }
  219.  
  220. .pill {
  221. padding: 0.35rem 0.7rem;
  222. border-radius: 999px;
  223. font-size: 0.8rem;
  224. font-weight: 700;
  225. }
  226.  
  227. .pill.red { background: var(--deep-red-100); color: var(--deep-red-800); }
  228. .pill.yellow { background: var(--mustard-200); color: var(--mustard-900); }
  229. .pill.green { background: var(--green-200); color: var(--green-900); }
  230.  
  231. .section {
  232. padding: 2rem 0;
  233. }
  234.  
  235. .section h2 {
  236. margin: 0 0 0.5rem;
  237. font-size: 2rem;
  238. color: var(--deep-red-800);
  239. }
  240.  
  241. .section p.lead {
  242. margin: 0 0 1.5rem;
  243. color: var(--text-soft);
  244. max-width: 65ch;
  245. }
  246.  
  247. .cards {
  248. display: grid;
  249. grid-template-columns: repeat(3, 1fr);
  250. gap: 1rem;
  251. }
  252.  
  253. .card {
  254. background: var(--surface);
  255. backdrop-filter: blur(10px);
  256. border: 1px solid var(--border);
  257. border-radius: 22px;
  258. padding: 1.25rem;
  259. box-shadow: 0 14px 30px var(--shadow);
  260. }
  261.  
  262. .card-icon {
  263. width: 44px;
  264. height: 44px;
  265. border-radius: 14px;
  266. display: grid;
  267. place-items: center;
  268. margin-bottom: 0.9rem;
  269. font-weight: 800;
  270. color: white;
  271. }
  272.  
  273. .card:nth-child(1) .card-icon { background: var(--deep-red-500); }
  274. .card:nth-child(2) .card-icon { background: var(--mustard-600); }
  275. .card:nth-child(3) .card-icon { background: var(--green-600); }
  276.  
  277. .card h3 {
  278. margin: 0 0 0.5rem;
  279. color: var(--deep-red-900);
  280. }
  281.  
  282. .card p {
  283. margin: 0;
  284. color: var(--text-soft);
  285. }
  286.  
  287. .banner {
  288. margin-top: 2rem;
  289. background: linear-gradient(135deg, var(--deep-red-700), var(--deep-red-500));
  290. color: white;
  291. border-radius: 24px;
  292. padding: 1.5rem;
  293. display: flex;
  294. justify-content: space-between;
  295. gap: 1rem;
  296. align-items: center;
  297. box-shadow: 0 18px 40px var(--shadow);
  298. }
  299.  
  300. .banner p {
  301. margin: 0.4rem 0 0;
  302. color: rgba(255,255,255,0.88);
  303. }
  304.  
  305. .footer {
  306. padding: 3rem 0;
  307. color: var(--text-soft);
  308. font-size: 0.95rem;
  309. }
  310.  
  311. @media (max-width: 900px) {
  312. .hero-grid,
  313. .cards {
  314. grid-template-columns: 1fr;
  315. }
  316.  
  317. .nav-inner {
  318. flex-direction: column;
  319. align-items: flex-start;
  320. }
  321.  
  322. .banner {
  323. flex-direction: column;
  324. align-items: flex-start;
  325. }
  326. }
  327. </style>
  328. </head>
  329. <body>
  330. <header class="nav">
  331. <div class="container nav-inner">
  332. <div class="brand">Acorn Studio</div>
  333. <nav class="nav-links">
  334. <a href="#">Work</a>
  335. <a href="#">Pricing</a>
  336. <a href="#">About</a>
  337. </nav>
  338. </div>
  339. </header>
  340.  
  341. <main class="container">
  342. <section class="hero">
  343. <div class="hero-grid">
  344. <div>
  345. <div class="eyebrow">Palette preview website</div>
  346. <h1>Design with warm contrast and soft natural tones</h1>
  347. <p>
  348. This demo uses your deep red, mustard, and green palette in a
  349. full landing page so you can judge the mood, readability, and
  350. balance of the colors in a realistic layout.
  351. </p>
  352.  
  353. <div class="hero-actions">
  354. <button class="btn btn-primary">Get started</button>
  355. <button class="btn btn-secondary">See examples</button>
  356. </div>
  357.  
  358. <div class="hero-stats">
  359. <span>Warm and earthy</span>
  360. <span>•</span>
  361. <span>Distinct accent colors</span>
  362. <span>•</span>
  363. <span>Good for editorial or artisan brands</span>
  364. </div>
  365. </div>
  366.  
  367. <div class="mockup">
  368. <div class="mockup-header">
  369. <div class="dot"></div>
  370. <div class="dot"></div>
  371. <div class="dot"></div>
  372. </div>
  373.  
  374. <div class="mockup-card">
  375. <strong style="color: var(--deep-red-800);">Seasonal collection</strong>
  376. <p style="color: var(--text-soft); margin: 0.5rem 0 0;">
  377. Muted warmth with organic accents and soft UI depth.
  378. </p>
  379. <div class="pill-row">
  380. <span class="pill red">Editorial</span>
  381. <span class="pill yellow">Warm</span>
  382. <span class="pill green">Natural</span>
  383. </div>
  384. </div>
  385.  
  386. <div class="mockup-card">
  387. <strong style="color: var(--deep-red-800);">Color balance</strong>
  388. <div style="display:flex; gap:0.5rem; margin-top:0.8rem;">
  389. <div style="height:14px; flex:3; background:var(--deep-red-500); border-radius:999px;"></div>
  390. <div style="height:14px; flex:2; background:var(--mustard-500); border-radius:999px;"></div>
  391. <div style="height:14px; flex:2; background:var(--green-500); border-radius:999px;"></div>
  392. </div>
  393. </div>
  394.  
  395. <div class="mockup-card" style="background: var(--green-100);">
  396. <strong style="color: var(--green-900);">Looks especially nice for:</strong>
  397. <p style="color: var(--green-800); margin: 0.5rem 0 0;">
  398. food brands, craft products, blogs, eco startups, and boutique shops.
  399. </p>
  400. </div>
  401. </div>
  402. </div>
  403. </section>
  404.  
  405. <section class="section">
  406. <h2>Feature cards</h2>
  407. <p class="lead">
  408. This section helps you judge whether the palette works for content-heavy UI cards and icon accents.
  409. </p>
  410.  
  411. <div class="cards">
  412. <article class="card">
  413. <div class="card-icon">A</div>
  414. <h3>Bold headline color</h3>
  415. <p>
  416. The deep red works well for strong typography and gives the page a slightly premium, earthy feel.
  417. </p>
  418. </article>
  419.  
  420. <article class="card">
  421. <div class="card-icon">B</div>
  422. <h3>Warm backgrounds</h3>
  423. <p>
  424. The mustard shades are good as soft backgrounds, highlights, or subtle branding surfaces.
  425. </p>
  426. </article>
  427.  
  428. <article class="card">
  429. <div class="card-icon">C</div>
  430. <h3>Healthy accents</h3>
  431. <p>
  432. The green shades give a natural accent that pairs nicely with the warmer red and yellow tones.
  433. </p>
  434. </article>
  435. </div>
  436.  
  437. <div class="banner">
  438. <div>
  439. <strong style="font-size: 1.15rem;">Overall impression</strong>
  440. <p>
  441. The palette feels warm, organic, and distinctive — not corporate blue, more handcrafted and welcoming.
  442. </p>
  443. </div>
  444. <button class="btn btn-secondary">Try this palette</button>
  445. </div>
  446. </section>
  447.  
  448. <footer class="footer">
  449. Palette demo using your custom OKLCH colors.
  450. </footer>
  451. </main>
  452. </body>
  453. </html>
Pasted 2026-05-17 12:28:08

Short link:

VicePaste is a public paste platform.

Login or Register to edit, delete and keep track of your pastes and more.

Recent Public Pastes
FAQS Contact
Copyright © 1986-2026 VicePaste. All rights reserved.