color.js实现ui配色可视化设计 i代码-html代码-BFW代码库

color.js实现ui配色可视化设计 i代码

代码语言：html

代码描述：color.js实现ui配色可视化设计 i代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
  
<style>
:root {
  /* DYNAMIC BASE VALUES */
  --hue: 260;
  --chroma: 0.2;
  --lightness: 55;
  /* HARMONY HUES */
  --hue-primary: var(--hue);
  --hue-secondary: calc(var(--hue) + 120);
  --hue-tertiary: calc(var(--hue) + 240);
  /* CALCULATED FOREGROUNDS (Updated by JS) */
  --on-primary: #ffffff;
  --on-secondary: #ffffff;
  --on-tertiary: #ffffff;
  /* BODY TEXT (Updated by Theme) */
  --on-surface: #111111;
  /* SURFACES */
  --surface-sunken: oklch(92% 0.01 var(--hue));
  --surface-default: oklch(97% 0.005 var(--hue));
  --surface-raised: oklch(100% 0 var(--hue));
  --surface-overlay: oklch(100% 0 var(--hue));
  /* PALETTE */
  --primary: oklch(
    calc(var(--lightness) * 1%) var(--chroma) var(--hue-primary)
  );
  --secondary: oklch(
    calc(var(--lightness) * 1%) var(--chroma) var(--hue-secondary)
  );
  --tertiary: oklch(
    calc(var(--lightness) * 1%) var(--chroma) var(--hue-tertiary)
  );
  /* SHADOWS */
  --shadow-2: 0 4px 12px oklch(0 0 0 / 0.1);
}

/* DARK MODE OVERRIDES */
[data-theme=dark] {
  --on-surface: #f0f0f0;
  /* Dark surfaces follow lighting physics */
  --surface-sunken: oklch(12% 0.02 var(--hue));
  --surface-default: oklch(16% 0.02 var(--hue));
  --surface-raised: oklch(20% 0.02 var(--hue));
  --surface-overlay: oklch(25% 0.02 var(--hue));
  --shadow-2: 0 4px 12px oklch(0 0 0 / 0.5);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Inter", Roboto, sans-serif;
  background-color: var(--surface-default);
  color: var(--on-surface);
  display: grid;
  grid-template-columns: 320px 1fr;
 .........完整代码请登录后点击上方下载按钮下载查看