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

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

:root, .light, .light-theme {
    --mauve-1: #fdfcfd;
    --mauve-2: #faf9fb;
    --mauve-3: #f2eff3;
    --mauve-4: #eae7ec;
    --mauve-5: #e3dfe6;
    --mauve-6: #dbd8e0;
    --mauve-7: #d0cdd7;
    --mauve-8: #bcbac7;
    --mauve-9: #8e8c99;
    --mauve-10: #84828e;
    --mauve-11: #65636d;
    --mauve-12: #211f26;
    --mauve-a1: #55005503;
    --mauve-a2: #2b005506;
    --mauve-a3: #30004010;
    --mauve-a4: #20003618;
    --mauve-a5: #20003820;
    --mauve-a6: #14003527;
    --mauve-a7: #10003332;
    --mauve-a8: #08003145;
    --mauve-a9: #05001d73;
    --mauve-a10: #0500197d;
    --mauve-a11: #0400119c;
    --mauve-a12: #020008e0;
    --mauve-surface: #ffffffcc;
    --mauve-indicator: var(--mauve-9);
    --mauve-track: var(--mauve-9);
}
@supports (color: color(display-p3 1 1 1)) {
    @media (color-gamut: p3) {
        :root, .light, .light-theme {
            --mauve-1: color(display-p3 0.991 0.988 0.992);
            --mauve-2: color(display-p3 0.98 0.976 0.984);
            --mauve-3: color(display-p3 0.946 0.938 0.952);
            --mauve-4: color(display-p3 0.915 0.906 0.925);
            --mauve-5: color(display-p3 0.886 0.876 0.901);
            --mauve-6: color(display-p3 0.856 0.846 0.875);
            --mauve-7: color(display-p3 0.814 0.804 0.84);
            --mauve-8: color(display-p3 0.735 0.728 0.777);
            --mauve-9: color(display-p3 0.555 0.549 0.596);
            --mauve-10: color(display-p3 0.514 0.508 0.552);
            --mauve-11: color(display-p3 0.395 0.388 0.424);
            --mauve-12: color(display-p3 0.128 0.122 0.147);
            --mauve-a1: color(display-p3 0.349 0.024 0.349 / 0.012);
            --mauve-a2: color(display-p3 0.184 0.024 0.349 / 0.024);
            --mauve-a3: color(display-p3 0.129 0.008 0.255 / 0.063);
            --mauve-a4: color(display-p3 0.094 0.012 0.216 / 0.095);
            --mauve-a5: color(display-p3 0.098 0.008 0.224 / 0.126);
            --mauve-a6: color(display-p3 0.055 0.004 0.18 / 0.153);
            --mauve-a7: color(display-p3 0.067 0.008 0.184 / 0.197);
            --mauve-a8: color(display-p3 0.02 0.004 0.176 / 0.271);
            --mauve-a9: color(display-p3 0.02 0.004 0.106 / 0.451);
            --mauve-a10: color(display-p3 0.012 0.004 0.09 / 0.491);
            --mauve-a11: color(display-p3 0.016 0 0.059 / 0.612);
            --mauve-a12: color(display-p3 0.008 0 0.027 / 0.879);
            --mauve-surface: color(display-p3 1 1 1 / 0.8);
        }
    }
}
.dark, .dark-theme {
    --mauve-1: #121113;
    --mauve-2: #1a191b;
    --mauve-3: #232225;
    --mauve-4: #2b292d;
    --mauve-5: #323035;
    --mauve-6: #3c393f;
    --mauve-7: #49474e;
    --mauve-8: #625f69;
    --mauve-9: #6f6d78;
    --mauve-10: #7c7a85;
    --mauve-11: #b5b2bc;
    --mauve-12: #eeeef0;
    --mauve-a1: #00000000;
    --mauve-a2: #f5f4f609;
    --mauve-a3: #ebeaf814;
    --mauve-a4: #eee5f81d;
    --mauve-a5: #efe6fe25;
    --mauve-a6: #f1e6fd30;
    --mauve-a7: #eee9ff40;
    --mauve-a8: #eee7ff5d;
    --mauve-a9: #eae6fd6e;
    --mauve-a10: #ece9fd7c;
    --mauve-a11: #f5f1ffb7;
    --mauve-a12: #fdfdffef;
    --mauve-surface: #22212380;
    --mauve-indicator: var(--mauve-9);
    --mauve-track: var(--mauve-9);
}
@supports (color: color(display-p3 1 1 1)) {
    @media (color-gamut: p3) {
        .dark, .dark-theme {
            --mauve-1: color(display-p3 0.07 0.067 0.074);
            --mauve-2: color(display-p3 0.101 0.098 0.105);
            --mauve-3: color(display-p3 0.138 0.134 0.144);
            --mauve-4: color(display-p3 0.167 0.161 0.175);
            --mauve-5: color(display-p3 0.196 0.189 0.206);
            --mauve-6: color(display-p3 0.232 0.225 0.245);
            --mauve-7: color(display-p3 0.286 0.277 0.302);
            --mauve-8: color(display-p3 0.383 0.373 0.408);
            --mauve-9: color(display-p3 0.434 0.428 0.467);
            --mauve-10: color(display-p3 0.487 0.48 0.519);
            --mauve-11: color(display-p3 0.707 0.7 0.735);
            --mauve-12: color(display-p3 0.933 0.933 0.94);
            --mauve-a1: color(display-p3 0 0 0 / 0);
            --mauve-a2: color(display-p3 0.996 0.992 1 / 0.034);
            --mauve-a3: color(display-p3 0.937 0.933 0.992 / 0.077);
            --mauve-a4: color(display-p3 0.957 0.918 0.996 / 0.111);
            --mauve-a5: color(display-p3 0.937 0.906 0.996 / 0.145);
            --mauve-a6: color(display-p3 0.953 0.925 0.996 / 0.183);
            --mauve-a7: color(display-p3 0.945 0.929 1 / 0.246);
            --mauve-a8: color(display-p3 0.937 0.918 1 / 0.361);
            --mauve-a9: color(display-p3 0.933 0.918 1 / 0.424);
            --mauve-a10: color(display-p3 0.941 0.925 1 / 0.479);
            --mauve-a11: color(display-p3 0.965 0.961 1 / 0.712);
            --mauve-a12: color(display-p3 0.992 0.992 1 / 0.937);
            --mauve-surface: color(display-p3 0.1333 0.1255 0.1333 / 0.5);
        }
    }
}
:root {
    --mauve-contrast: white;
}