Colors
Ten color scales with 12 steps each, for light and dark mode. Each step has one purpose, and every scale passes the same contrast checks.
Scales
Select a scale to see its steps. The steps show in light mode.
123456789101112
Blue
Links, focus, and primary actions.
- Aa4.6 · AA
Solid
1 on 9
- Aa5.4 · AA
Text
11 on 2
- Aa13.8 · AAA
Strong text
12 on 1
Backgrounds1–2
Page and card backgrounds.
1Background
--blue-1
2Subtle background
--blue-2
Fills3–5
Component fills for the normal, hover, and pressed state.
3Fill
--blue-3
4Hover fill
--blue-4
5Active fill
--blue-5
Borders6–8
Lines between sections, component borders, and hover borders.
6Subtle border
--blue-6
7Border
--blue-7
8Strong border
--blue-8
Solids9–10
Buttons, badges, and focus rings. Step 10 is the hover state.
9Solid
--blue-9
10Solid hover
--blue-10
Text11–12
Secondary text and high-contrast text.
11Text
--blue-11
12Strong text
--blue-12
Use the colors
Works with vip/ui and any project on Tailwind CSS v4.
- 1
Add the variables
Paste the CSS in your global CSS file. Each scale sets 12 variables in
:rootand.dark, from--blue-1to--blue-12. To copy one scale, select it above.globals.css:root { --gray-1: oklch(0.987 0 0); --gray-2: oklch(0.969 0 0); --gray-3: oklch(0.944 0 0); --gray-4: oklch(0.919 0 0); --gray-5: oklch(0.894 0 0); --gray-6: oklch(0.866 0 0); --gray-7: oklch(0.820 0 0); --gray-8: oklch(0.755 0 0); --gray-9: oklch(0.420 0 0); --gray-10: oklch(0.385 0 0); --gray-11: oklch(0.505 0 0); --gray-12: oklch(0.285 0 0); --red-1: oklch(0.987 0.010 27); --red-2: oklch(0.969 0.017 27); --red-3: oklch(0.944 0.028 27); --red-4: oklch(0.919 0.040 27); --red-5: oklch(0.894 0.051 27); --red-6: oklch(0.866 0.066 27); --red-7: oklch(0.820 0.091 27); --red-8: oklch(0.755 0.125 27); --red-9: oklch(0.576 0.190 27); --red-10: oklch(0.541 0.186 27); --red-11: oklch(0.505 0.118 27); --red-12: oklch(0.285 0.057 27); --orange-1: oklch(0.987 0.009 58); --orange-2: oklch(0.969 0.015 58); --orange-3: oklch(0.944 0.026 58); --orange-4: oklch(0.919 0.036 58); --orange-5: oklch(0.894 0.046 58); --orange-6: oklch(0.866 0.059 58); --orange-7: oklch(0.820 0.082 58); --orange-8: oklch(0.755 0.112 58); --orange-9: oklch(0.565 0.170 58); --orange-10: oklch(0.530 0.167 58); --orange-11: oklch(0.505 0.105 58); --orange-12: oklch(0.285 0.051 58); --yellow-1: oklch(0.990 0.008 92); --yellow-2: oklch(0.975 0.014 92); --yellow-3: oklch(0.955 0.024 92); --yellow-4: oklch(0.935 0.034 92); --yellow-5: oklch(0.915 0.043 92); --yellow-6: oklch(0.890 0.056 92); --yellow-7: oklch(0.865 0.077 92); --yellow-8: oklch(0.835 0.106 92); --yellow-9: oklch(0.800 0.160 92); --yellow-10: oklch(0.765 0.157 92); --yellow-11: oklch(0.520 0.099 92); --yellow-12: oklch(0.300 0.048 92); --green-1: oklch(0.987 0.008 152); --green-2: oklch(0.969 0.014 152); --green-3: oklch(0.944 0.024 152); --green-4: oklch(0.919 0.034 152); --green-5: oklch(0.894 0.043 152); --green-6: oklch(0.866 0.056 152); --green-7: oklch(0.820 0.077 152); --green-8: oklch(0.755 0.106 152); --green-9: oklch(0.531 0.160 152); --green-10: oklch(0.496 0.157 152); --green-11: oklch(0.505 0.099 152); --green-12: oklch(0.285 0.048 152); --teal-1: oklch(0.987 0.007 178); --teal-2: oklch(0.969 0.013 178); --teal-3: oklch(0.944 0.021 178); --teal-4: oklch(0.919 0.029 178); --teal-5: oklch(0.894 0.038 178); --teal-6: oklch(0.866 0.049 178); --teal-7: oklch(0.820 0.067 178); --teal-8: oklch(0.755 0.092 178); --teal-9: oklch(0.522 0.140 178); --teal-10: oklch(0.487 0.137 178); --teal-11: oklch(0.505 0.087 178); --teal-12: oklch(0.285 0.042 178); --cyan-1: oklch(0.987 0.007 205); --cyan-2: oklch(0.969 0.012 205); --cyan-3: oklch(0.944 0.019 205); --cyan-4: oklch(0.919 0.027 205); --cyan-5: oklch(0.894 0.035 205); --cyan-6: oklch(0.866 0.045 205); --cyan-7: oklch(0.820 0.062 205); --cyan-8: oklch(0.755 0.086 205); --cyan-9: oklch(0.526 0.130 205); --cyan-10: oklch(0.491 0.127 205); --cyan-11: oklch(0.505 0.081 205); --cyan-12: oklch(0.285 0.039 205); --blue-1: oklch(0.987 0.009 258); --blue-2: oklch(0.969 0.016 258); --blue-3: oklch(0.944 0.027 258); --blue-4: oklch(0.919 0.038 258); --blue-5: oklch(0.894 0.049 258); --blue-6: oklch(0.866 0.063 258); --blue-7: oklch(0.820 0.086 258); --blue-8: oklch(0.755 0.119 258); --blue-9: oklch(0.558 0.180 258); --blue-10: oklch(0.523 0.176 258); --blue-11: oklch(0.505 0.112 258); --blue-12: oklch(0.285 0.054 258); --violet-1: oklch(0.987 0.010 297); --violet-2: oklch(0.969 0.017 297); --violet-3: oklch(0.944 0.028 297); --violet-4: oklch(0.919 0.040 297); --violet-5: oklch(0.894 0.051 297); --violet-6: oklch(0.866 0.066 297); --violet-7: oklch(0.820 0.091 297); --violet-8: oklch(0.755 0.125 297); --violet-9: oklch(0.573 0.190 297); --violet-10: oklch(0.538 0.186 297); --violet-11: oklch(0.505 0.118 297); --violet-12: oklch(0.285 0.057 297); --pink-1: oklch(0.987 0.010 348); --pink-2: oklch(0.969 0.018 348); --pink-3: oklch(0.944 0.030 348); --pink-4: oklch(0.919 0.042 348); --pink-5: oklch(0.894 0.054 348); --pink-6: oklch(0.866 0.070 348); --pink-7: oklch(0.820 0.096 348); --pink-8: oklch(0.755 0.132 348); --pink-9: oklch(0.580 0.200 348); --pink-10: oklch(0.545 0.196 348); --pink-11: oklch(0.505 0.124 348); --pink-12: oklch(0.285 0.060 348);}.dark { --gray-1: oklch(0.185 0 0); --gray-2: oklch(0.215 0 0); --gray-3: oklch(0.243 0 0); --gray-4: oklch(0.268 0 0); --gray-5: oklch(0.293 0 0); --gray-6: oklch(0.322 0 0); --gray-7: oklch(0.365 0 0); --gray-8: oklch(0.430 0 0); --gray-9: oklch(0.700 0 0); --gray-10: oklch(0.740 0 0); --gray-11: oklch(0.735 0 0); --gray-12: oklch(0.930 0 0); --red-1: oklch(0.185 0.034 27); --red-2: oklch(0.215 0.048 27); --red-3: oklch(0.243 0.061 27); --red-4: oklch(0.268 0.072 27); --red-5: oklch(0.293 0.082 27); --red-6: oklch(0.322 0.091 27); --red-7: oklch(0.365 0.106 27); --red-8: oklch(0.430 0.129 27); --red-9: oklch(0.700 0.190 27); --red-10: oklch(0.740 0.184 27); --red-11: oklch(0.735 0.129 27); --red-12: oklch(0.930 0.053 27); --orange-1: oklch(0.185 0.031 58); --orange-2: oklch(0.215 0.043 58); --orange-3: oklch(0.243 0.054 58); --orange-4: oklch(0.268 0.065 58); --orange-5: oklch(0.293 0.073 58); --orange-6: oklch(0.322 0.082 58); --orange-7: oklch(0.365 0.095 58); --orange-8: oklch(0.430 0.116 58); --orange-9: oklch(0.700 0.170 58); --orange-10: oklch(0.740 0.165 58); --orange-11: oklch(0.735 0.116 58); --orange-12: oklch(0.930 0.048 58); --yellow-1: oklch(0.185 0.029 92); --yellow-2: oklch(0.215 0.040 92); --yellow-3: oklch(0.243 0.051 92); --yellow-4: oklch(0.268 0.061 92); --yellow-5: oklch(0.293 0.069 92); --yellow-6: oklch(0.322 0.077 92); --yellow-7: oklch(0.365 0.090 92); --yellow-8: oklch(0.430 0.109 92); --yellow-9: oklch(0.700 0.160 92); --yellow-10: oklch(0.740 0.155 92); --yellow-11: oklch(0.735 0.109 92); --yellow-12: oklch(0.930 0.045 92); --green-1: oklch(0.185 0.029 152); --green-2: oklch(0.215 0.040 152); --green-3: oklch(0.243 0.051 152); --green-4: oklch(0.268 0.061 152); --green-5: oklch(0.293 0.069 152); --green-6: oklch(0.322 0.077 152); --green-7: oklch(0.365 0.090 152); --green-8: oklch(0.430 0.109 152); --green-9: oklch(0.700 0.160 152); --green-10: oklch(0.740 0.155 152); --green-11: oklch(0.735 0.109 152); --green-12: oklch(0.930 0.045 152); --teal-1: oklch(0.185 0.025 178); --teal-2: oklch(0.215 0.035 178); --teal-3: oklch(0.243 0.045 178); --teal-4: oklch(0.268 0.053 178); --teal-5: oklch(0.293 0.060 178); --teal-6: oklch(0.322 0.067 178); --teal-7: oklch(0.365 0.078 178); --teal-8: oklch(0.430 0.095 178); --teal-9: oklch(0.700 0.140 178); --teal-10: oklch(0.740 0.136 178); --teal-11: oklch(0.735 0.095 178); --teal-12: oklch(0.930 0.039 178); --cyan-1: oklch(0.185 0.023 205); --cyan-2: oklch(0.215 0.033 205); --cyan-3: oklch(0.243 0.042 205); --cyan-4: oklch(0.268 0.049 205); --cyan-5: oklch(0.293 0.056 205); --cyan-6: oklch(0.322 0.062 205); --cyan-7: oklch(0.365 0.073 205); --cyan-8: oklch(0.430 0.088 205); --cyan-9: oklch(0.700 0.130 205); --cyan-10: oklch(0.740 0.126 205); --cyan-11: oklch(0.735 0.088 205); --cyan-12: oklch(0.930 0.036 205); --blue-1: oklch(0.185 0.032 258); --blue-2: oklch(0.215 0.045 258); --blue-3: oklch(0.243 0.058 258); --blue-4: oklch(0.268 0.068 258); --blue-5: oklch(0.293 0.077 258); --blue-6: oklch(0.322 0.086 258); --blue-7: oklch(0.365 0.101 258); --blue-8: oklch(0.430 0.122 258); --blue-9: oklch(0.700 0.180 258); --blue-10: oklch(0.740 0.175 258); --blue-11: oklch(0.735 0.122 258); --blue-12: oklch(0.930 0.050 258); --violet-1: oklch(0.185 0.034 297); --violet-2: oklch(0.215 0.048 297); --violet-3: oklch(0.243 0.061 297); --violet-4: oklch(0.268 0.072 297); --violet-5: oklch(0.293 0.082 297); --violet-6: oklch(0.322 0.091 297); --violet-7: oklch(0.365 0.106 297); --violet-8: oklch(0.430 0.129 297); --violet-9: oklch(0.700 0.190 297); --violet-10: oklch(0.740 0.184 297); --violet-11: oklch(0.735 0.129 297); --violet-12: oklch(0.930 0.053 297); --pink-1: oklch(0.185 0.036 348); --pink-2: oklch(0.215 0.050 348); --pink-3: oklch(0.243 0.064 348); --pink-4: oklch(0.268 0.076 348); --pink-5: oklch(0.293 0.086 348); --pink-6: oklch(0.322 0.096 348); --pink-7: oklch(0.365 0.112 348); --pink-8: oklch(0.430 0.136 348); --pink-9: oklch(0.700 0.200 348); --pink-10: oklch(0.740 0.194 348); --pink-11: oklch(0.735 0.136 348); --pink-12: oklch(0.930 0.056 348);}Show more - 2
Add Tailwind colors
Optional. This block adds utilities such as
bg-blue-3,border-blue-7, andtext-blue-11. The Tailwind default colors use 50 to 950, so the names do not conflict.globals.css@theme inline { --color-gray-1: var(--gray-1); --color-gray-2: var(--gray-2); --color-gray-3: var(--gray-3); --color-gray-4: var(--gray-4); --color-gray-5: var(--gray-5); --color-gray-6: var(--gray-6); --color-gray-7: var(--gray-7); --color-gray-8: var(--gray-8); --color-gray-9: var(--gray-9); --color-gray-10: var(--gray-10); --color-gray-11: var(--gray-11); --color-gray-12: var(--gray-12); --color-red-1: var(--red-1); --color-red-2: var(--red-2); --color-red-3: var(--red-3); --color-red-4: var(--red-4); --color-red-5: var(--red-5); --color-red-6: var(--red-6); --color-red-7: var(--red-7); --color-red-8: var(--red-8); --color-red-9: var(--red-9); --color-red-10: var(--red-10); --color-red-11: var(--red-11); --color-red-12: var(--red-12); --color-orange-1: var(--orange-1); --color-orange-2: var(--orange-2); --color-orange-3: var(--orange-3); --color-orange-4: var(--orange-4); --color-orange-5: var(--orange-5); --color-orange-6: var(--orange-6); --color-orange-7: var(--orange-7); --color-orange-8: var(--orange-8); --color-orange-9: var(--orange-9); --color-orange-10: var(--orange-10); --color-orange-11: var(--orange-11); --color-orange-12: var(--orange-12); --color-yellow-1: var(--yellow-1); --color-yellow-2: var(--yellow-2); --color-yellow-3: var(--yellow-3); --color-yellow-4: var(--yellow-4); --color-yellow-5: var(--yellow-5); --color-yellow-6: var(--yellow-6); --color-yellow-7: var(--yellow-7); --color-yellow-8: var(--yellow-8); --color-yellow-9: var(--yellow-9); --color-yellow-10: var(--yellow-10); --color-yellow-11: var(--yellow-11); --color-yellow-12: var(--yellow-12); --color-green-1: var(--green-1); --color-green-2: var(--green-2); --color-green-3: var(--green-3); --color-green-4: var(--green-4); --color-green-5: var(--green-5); --color-green-6: var(--green-6); --color-green-7: var(--green-7); --color-green-8: var(--green-8); --color-green-9: var(--green-9); --color-green-10: var(--green-10); --color-green-11: var(--green-11); --color-green-12: var(--green-12); --color-teal-1: var(--teal-1); --color-teal-2: var(--teal-2); --color-teal-3: var(--teal-3); --color-teal-4: var(--teal-4); --color-teal-5: var(--teal-5); --color-teal-6: var(--teal-6); --color-teal-7: var(--teal-7); --color-teal-8: var(--teal-8); --color-teal-9: var(--teal-9); --color-teal-10: var(--teal-10); --color-teal-11: var(--teal-11); --color-teal-12: var(--teal-12); --color-cyan-1: var(--cyan-1); --color-cyan-2: var(--cyan-2); --color-cyan-3: var(--cyan-3); --color-cyan-4: var(--cyan-4); --color-cyan-5: var(--cyan-5); --color-cyan-6: var(--cyan-6); --color-cyan-7: var(--cyan-7); --color-cyan-8: var(--cyan-8); --color-cyan-9: var(--cyan-9); --color-cyan-10: var(--cyan-10); --color-cyan-11: var(--cyan-11); --color-cyan-12: var(--cyan-12); --color-blue-1: var(--blue-1); --color-blue-2: var(--blue-2); --color-blue-3: var(--blue-3); --color-blue-4: var(--blue-4); --color-blue-5: var(--blue-5); --color-blue-6: var(--blue-6); --color-blue-7: var(--blue-7); --color-blue-8: var(--blue-8); --color-blue-9: var(--blue-9); --color-blue-10: var(--blue-10); --color-blue-11: var(--blue-11); --color-blue-12: var(--blue-12); --color-violet-1: var(--violet-1); --color-violet-2: var(--violet-2); --color-violet-3: var(--violet-3); --color-violet-4: var(--violet-4); --color-violet-5: var(--violet-5); --color-violet-6: var(--violet-6); --color-violet-7: var(--violet-7); --color-violet-8: var(--violet-8); --color-violet-9: var(--violet-9); --color-violet-10: var(--violet-10); --color-violet-11: var(--violet-11); --color-violet-12: var(--violet-12); --color-pink-1: var(--pink-1); --color-pink-2: var(--pink-2); --color-pink-3: var(--pink-3); --color-pink-4: var(--pink-4); --color-pink-5: var(--pink-5); --color-pink-6: var(--pink-6); --color-pink-7: var(--pink-7); --color-pink-8: var(--pink-8); --color-pink-9: var(--pink-9); --color-pink-10: var(--pink-10); --color-pink-11: var(--pink-11); --color-pink-12: var(--pink-12);}Show more - 3
Use a theme