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

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

:root, .light, .light-theme {
    --purple-1: #fefcfe;
    --purple-2: #fbf7fe;
    --purple-3: #f7edfe;
    --purple-4: #f2e2fc;
    --purple-5: #ead5f9;
    --purple-6: #e0c4f4;
    --purple-7: #d1afec;
    --purple-8: #be93e4;
    --purple-9: #8e4ec6;
    --purple-10: #8347b9;
    --purple-11: #8145b5;
    --purple-12: #402060;
    --purple-a1: #aa00aa03;
    --purple-a2: #8000e008;
    --purple-a3: #8e00f112;
    --purple-a4: #8d00e51d;
    --purple-a5: #8000db2a;
    --purple-a6: #7a01d03b;
    --purple-a7: #6d00c350;
    --purple-a8: #6600c06c;
    --purple-a9: #5c00adb1;
    --purple-a10: #53009eb8;
    --purple-a11: #52009aba;
    --purple-a12: #250049df;
    --purple-surface: #faf5fecc;
    --purple-indicator: var(--purple-9);
    --purple-track: var(--purple-9);
}
@supports (color: color(display-p3 1 1 1)) {
    @media (color-gamut: p3) {
        :root, .light, .light-theme {
            --purple-1: color(display-p3 0.995 0.988 0.996);
            --purple-2: color(display-p3 0.983 0.971 0.993);
            --purple-3: color(display-p3 0.963 0.931 0.989);
            --purple-4: color(display-p3 0.937 0.888 0.981);
            --purple-5: color(display-p3 0.904 0.837 0.966);
            --purple-6: color(display-p3 0.86 0.774 0.942);
            --purple-7: color(display-p3 0.799 0.69 0.91);
            --purple-8: color(display-p3 0.719 0.583 0.874);
            --purple-9: color(display-p3 0.523 0.318 0.751);
            --purple-10: color(display-p3 0.483 0.289 0.7);
            --purple-11: color(display-p3 0.473 0.281 0.687);
            --purple-12: color(display-p3 0.234 0.132 0.363);
            --purple-a1: color(display-p3 0.675 0.024 0.675 / 0.012);
            --purple-a2: color(display-p3 0.443 0.024 0.722 / 0.028);
            --purple-a3: color(display-p3 0.506 0.008 0.835 / 0.071);
            --purple-a4: color(display-p3 0.451 0.004 0.831 / 0.114);
            --purple-a5: color(display-p3 0.431 0.004 0.788 / 0.165);
            --purple-a6: color(display-p3 0.384 0.004 0.745 / 0.228);
            --purple-a7: color(display-p3 0.357 0.004 0.71 / 0.31);
            --purple-a8: color(display-p3 0.322 0.004 0.702 / 0.416);
            --purple-a9: color(display-p3 0.298 0 0.639 / 0.683);
            --purple-a10: color(display-p3 0.271 0 0.58 / 0.71);
            --purple-a11: color(display-p3 0.473 0.281 0.687);
            --purple-a12: color(display-p3 0.234 0.132 0.363);
            --purple-surface: color(display-p3 0.9804 0.9647 0.9922 / 0.8);
        }
    }
}
.dark, .dark-theme {
    --purple-1: #18111b;
    --purple-2: #1e1523;
    --purple-3: #301c3b;
    --purple-4: #3d224e;
    --purple-5: #48295c;
    --purple-6: #54346b;
    --purple-7: #664282;
    --purple-8: #8457aa;
    --purple-9: #8e4ec6;
    --purple-10: #9a5cd0;
    --purple-11: #d19dff;
    --purple-12: #ecd9fa;
    --purple-a1: #b412f90b;
    --purple-a2: #b744f714;
    --purple-a3: #c150ff2d;
    --purple-a4: #bb53fd42;
    --purple-a5: #be5cfd51;
    --purple-a6: #c16dfd61;
    --purple-a7: #c378fd7a;
    --purple-a8: #c47effa4;
    --purple-a9: #b661ffc2;
    --purple-a10: #bc6fffcd;
    --purple-a11: #d19dff;
    --purple-a12: #f1ddfffa;
    --purple-surface: #2b173580;
    --purple-indicator: var(--purple-9);
    --purple-track: var(--purple-9);
}
@supports (color: color(display-p3 1 1 1)) {
    @media (color-gamut: p3) {
        .dark, .dark-theme {
            --purple-1: color(display-p3 0.09 0.068 0.103);
            --purple-2: color(display-p3 0.113 0.082 0.134);
            --purple-3: color(display-p3 0.175 0.112 0.224);
            --purple-4: color(display-p3 0.224 0.137 0.297);
            --purple-5: color(display-p3 0.264 0.167 0.349);
            --purple-6: color(display-p3 0.311 0.208 0.406);
            --purple-7: color(display-p3 0.381 0.266 0.496);
            --purple-8: color(display-p3 0.49 0.349 0.649);
            --purple-9: color(display-p3 0.523 0.318 0.751);
            --purple-10: color(display-p3 0.57 0.373 0.791);
            --purple-11: color(display-p3 0.8 0.62 1);
            --purple-12: color(display-p3 0.913 0.854 0.971);
            --purple-a1: color(display-p3 0.686 0.071 0.996 / 0.038);
            --purple-a2: color(display-p3 0.722 0.286 0.996 / 0.072);
            --purple-a3: color(display-p3 0.718 0.349 0.996 / 0.169);
            --purple-a4: color(display-p3 0.702 0.353 1 / 0.248);
            --purple-a5: color(display-p3 0.718 0.404 1 / 0.303);
            --purple-a6: color(display-p3 0.733 0.455 1 / 0.366);
            --purple-a7: color(display-p3 0.753 0.506 1 / 0.458);
            --purple-a8: color(display-p3 0.749 0.522 1 / 0.622);
            --purple-a9: color(display-p3 0.686 0.408 1 / 0.736);
            --purple-a10: color(display-p3 0.71 0.459 1 / 0.778);
            --purple-a11: color(display-p3 0.8 0.62 1);
            --purple-a12: color(display-p3 0.913 0.854 0.971);
            --purple-surface: color(display-p3 0.149 0.0941 0.1961 / 0.5);
        }
    }
}
:root {
    --purple-contrast: white;
}