Lagoon
A precise, aquatic theme that captures the calm clarity of shallow waters and the mysterious depth of the open ocean.
Palette is generated via Tonex
:root {
--radius: 0.7rem;
--background: oklch(0.9806 0.0021 197.12);
--foreground: oklch(0.3175 0.0109 196.61);
--card: oklch(0.9806 0.0021 197.12);
--card-foreground: oklch(0.3175 0.0109 196.61);
--popover: oklch(0.9806 0.0021 197.12);
--popover-foreground: oklch(0.3175 0.0109 196.61);
--primary: oklch(0.5496 0.0937 195.72);
--primary-foreground: oklch(1 0 0);
--secondary: oklch(0.9104 0.0385 194.48);
--secondary-foreground: oklch(0.4313 0.0396 198.17);
--muted: oklch(0.9295 0.0064 197.05);
--muted-foreground: oklch(0.4856 0.01 196.83);
--accent: oklch(0.9295 0.0064 197.05);
--accent-foreground: oklch(0.3175 0.0109 196.61);
--destructive: oklch(0.5005 0.1268 26.87);
--border: oklch(0.7612 0.0079 196.99);
--input: oklch(0.7612 0.0079 196.99);
--ring: oklch(0.4751 0.081 195.91);
--sidebar: oklch(0.9641 0.0043 197.09);
--sidebar-foreground: oklch(0.4856 0.01 196.83);
--sidebar-primary: oklch(0.4751 0.081 195.91);
--sidebar-primary-foreground: oklch(0.9776 0.0321 194.26);
--sidebar-accent: oklch(0.9295 0.0064 197.05);
--sidebar-accent-foreground: oklch(0.3175 0.0109 196.61);
--sidebar-border: oklch(0.7612 0.0079 196.99);
--sidebar-ring: oklch(0.4751 0.081 195.91);
--chart-1: oklch(0.6186 0.0935 195.93);
--chart-2: oklch(0.5868 0.0947 215.86);
--chart-3: oklch(0.5537 0.0967 235.19);
--chart-4: oklch(0.5211 0.0989 254.44);
--chart-5: oklch(0.4874 0.102 273.88);
}
.dark {
--background: oklch(0.1638 0.014 195.87);
--foreground: oklch(0.9206 0.0233 193.44);
--card: oklch(0.213 0.0206 195.72);
--card-foreground: oklch(0.9206 0.0233 193.44);
--popover: oklch(0.213 0.0206 195.72);
--popover-foreground: oklch(0.9206 0.0233 193.44);
--primary: oklch(0.6862 0.0929 196.11);
--primary-foreground: oklch(0.2395 0.0409 194.77);
--secondary: oklch(0.3067 0.0416 195.2);
--secondary-foreground: oklch(0.7531 0.0388 196.36);
--muted: oklch(0.2641 0.026 195.69);
--muted-foreground: oklch(0.7379 0.0233 196.66);
--accent: oklch(0.2889 0.0247 195.87);
--accent-foreground: oklch(0.9206 0.0233 193.44);
--destructive: oklch(0.749 0.1428 26.15);
--border: oklch(0.3968 0.0238 196.23);
--input: oklch(0.3968 0.0238 196.23);
--ring: oklch(0.6862 0.0929 196.11);
--sidebar: oklch(0.1845 0.0172 195.76);
--sidebar-foreground: oklch(0.7379 0.0233 196.66);
--sidebar-primary: oklch(0.6862 0.0929 196.11);
--sidebar-primary-foreground: oklch(0.2395 0.0409 194.77);
--sidebar-accent: oklch(0.2641 0.026 195.69);
--sidebar-accent-foreground: oklch(0.9206 0.0233 193.44);
--sidebar-border: oklch(0.3968 0.0238 196.23);
--sidebar-ring: oklch(0.6862 0.0929 196.11);
--chart-1: oklch(0.6443 0.0937 195.99);
--chart-2: oklch(0.6099 0.0942 215.87);
--chart-3: oklch(0.5771 0.0958 235.22);
--chart-4: oklch(0.5424 0.0991 255.21);
--chart-5: oklch(0.5116 0.1008 274.14);
}