@radix-ui/themes/tokens/colors/violet.css

[](https://radix-ui.com/themes)

:root, .light, .light-theme {
    --violet-1: #fdfcfe;
    --violet-2: #faf8ff;
    --violet-3: #f4f0fe;
    --violet-4: #ebe4ff;
    --violet-5: #e1d9ff;
    --violet-6: #d4cafe;
    --violet-7: #c2b5f5;
    --violet-8: #aa99ec;
    --violet-9: #6e56cf;
    --violet-10: #654dc4;
    --violet-11: #6550b9;
    --violet-12: #2f265f;
    --violet-a1: #5500aa03;
    --violet-a2: #4900ff07;
    --violet-a3: #4400ee0f;
    --violet-a4: #4300ff1b;
    --violet-a5: #3600ff26;
    --violet-a6: #3100fb35;
    --violet-a7: #2d01dd4a;
    --violet-a8: #2b00d066;
    --violet-a9: #2400b7a9;
    --violet-a10: #2300abb2;
    --violet-a11: #1f0099af;
    --violet-a12: #0b0043d9;
    --violet-surface: #f9f6ffcc;
    --violet-indicator: var(--violet-9);
    --violet-track: var(--violet-9);
}
@supports (color: color(display-p3 1 1 1)) {
    @media (color-gamut: p3) {
        :root, .light, .light-theme {
            --violet-1: color(display-p3 0.991 0.988 0.995);
            --violet-2: color(display-p3 0.978 0.974 0.998);
            --violet-3: color(display-p3 0.953 0.943 0.993);
            --violet-4: color(display-p3 0.916 0.897 1);
            --violet-5: color(display-p3 0.876 0.851 1);
            --violet-6: color(display-p3 0.825 0.793 0.981);
            --violet-7: color(display-p3 0.752 0.712 0.943);
            --violet-8: color(display-p3 0.654 0.602 0.902);
            --violet-9: color(display-p3 0.417 0.341 0.784);
            --violet-10: color(display-p3 0.381 0.306 0.741);
            --violet-11: color(display-p3 0.383 0.317 0.702);
            --violet-12: color(display-p3 0.179 0.15 0.359);
            --violet-a1: color(display-p3 0.349 0.024 0.675 / 0.012);
            --violet-a2: color(display-p3 0.161 0.024 0.863 / 0.028);
            --violet-a3: color(display-p3 0.204 0.004 0.871 / 0.059);
            --violet-a4: color(display-p3 0.196 0.004 1 / 0.102);
            --violet-a5: color(display-p3 0.165 0.008 1 / 0.15);
            --violet-a6: color(display-p3 0.153 0.004 0.906 / 0.208);
            --violet-a7: color(display-p3 0.141 0.004 0.796 / 0.287);
            --violet-a8: color(display-p3 0.133 0.004 0.753 / 0.397);
            --violet-a9: color(display-p3 0.114 0 0.675 / 0.659);
            --violet-a10: color(display-p3 0.11 0 0.627 / 0.695);
            --violet-a11: color(display-p3 0.383 0.317 0.702);
            --violet-a12: color(display-p3 0.179 0.15 0.359);
            --violet-surface: color(display-p3 0.9725 0.9647 0.9961 / 0.8);
        }
    }
}
.dark, .dark-theme {
    --violet-1: #14121f;
    --violet-2: #1b1525;
    --violet-3: #291f43;
    --violet-4: #33255b;
    --violet-5: #3c2e69;
    --violet-6: #473876;
    --violet-7: #56468b;
    --violet-8: #6958ad;
    --violet-9: #6e56cf;
    --violet-10: #7d66d9;
    --violet-11: #baa7ff;
    --violet-12: #e2ddfe;
    --violet-a1: #4422ff0f;
    --violet-a2: #853ff916;
    --violet-a3: #8354fe36;
    --violet-a4: #7d51fd50;
    --violet-a5: #845ffd5f;
    --violet-a6: #8f6cfd6d;
    --violet-a7: #9879ff83;
    --violet-a8: #977dfea8;
    --violet-a9: #8668ffcc;
    --violet-a10: #9176fed7;
    --violet-a11: #baa7ff;
    --violet-a12: #e3defffe;
    --violet-surface: #25193980;
    --violet-indicator: var(--violet-9);
    --violet-track: var(--violet-9);
}
@supports (color: color(display-p3 1 1 1)) {
    @media (color-gamut: p3) {
        .dark, .dark-theme {
            --violet-1: color(display-p3 0.077 0.071 0.118);
            --violet-2: color(display-p3 0.101 0.084 0.141);
            --violet-3: color(display-p3 0.154 0.123 0.256);
            --violet-4: color(display-p3 0.191 0.148 0.345);
            --violet-5: color(display-p3 0.226 0.182 0.396);
            --violet-6: color(display-p3 0.269 0.223 0.449);
            --violet-7: color(display-p3 0.326 0.277 0.53);
            --violet-8: color(display-p3 0.399 0.346 0.656);
            --violet-9: color(display-p3 0.417 0.341 0.784);
            --violet-10: color(display-p3 0.477 0.402 0.823);
            --violet-11: color(display-p3 0.72 0.65 1);
            --violet-12: color(display-p3 0.883 0.867 0.986);
            --violet-a1: color(display-p3 0.282 0.141 0.996 / 0.055);
            --violet-a2: color(display-p3 0.51 0.263 1 / 0.08);
            --violet-a3: color(display-p3 0.494 0.337 0.996 / 0.202);
            --violet-a4: color(display-p3 0.49 0.345 1 / 0.299);
            --violet-a5: color(display-p3 0.525 0.392 1 / 0.353);
            --violet-a6: color(display-p3 0.569 0.455 1 / 0.408);
            --violet-a7: color(display-p3 0.588 0.494 1 / 0.496);
            --violet-a8: color(display-p3 0.596 0.51 1 / 0.631);
            --violet-a9: color(display-p3 0.522 0.424 1 / 0.769);
            --violet-a10: color(display-p3 0.576 0.482 1 / 0.811);
            --violet-a11: color(display-p3 0.72 0.65 1);
            --violet-a12: color(display-p3 0.883 0.867 0.986);
            --violet-surface: color(display-p3 0.1333 0.102 0.2118 / 0.5);
        }
    }
}
:root {
    --violet-contrast: white;
}