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

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

:root, .light, .light-theme {
    --slate-1: #fcfcfd;
    --slate-2: #f9f9fb;
    --slate-3: #f0f0f3;
    --slate-4: #e8e8ec;
    --slate-5: #e0e1e6;
    --slate-6: #d9d9e0;
    --slate-7: #cdced6;
    --slate-8: #b9bbc6;
    --slate-9: #8b8d98;
    --slate-10: #80838d;
    --slate-11: #60646c;
    --slate-12: #1c2024;
    --slate-a1: #00005503;
    --slate-a2: #00005506;
    --slate-a3: #0000330f;
    --slate-a4: #00002d17;
    --slate-a5: #0009321f;
    --slate-a6: #00002f26;
    --slate-a7: #00062e32;
    --slate-a8: #00083046;
    --slate-a9: #00051d74;
    --slate-a10: #00071b7f;
    --slate-a11: #0007149f;
    --slate-a12: #000509e3;
    --slate-surface: #ffffffcc;
    --slate-indicator: var(--slate-9);
    --slate-track: var(--slate-9);
}
@supports (color: color(display-p3 1 1 1)) {
    @media (color-gamut: p3) {
        :root, .light, .light-theme {
            --slate-1: color(display-p3 0.988 0.988 0.992);
            --slate-2: color(display-p3 0.976 0.976 0.984);
            --slate-3: color(display-p3 0.94 0.941 0.953);
            --slate-4: color(display-p3 0.908 0.909 0.925);
            --slate-5: color(display-p3 0.88 0.881 0.901);
            --slate-6: color(display-p3 0.85 0.852 0.876);
            --slate-7: color(display-p3 0.805 0.808 0.838);
            --slate-8: color(display-p3 0.727 0.733 0.773);
            --slate-9: color(display-p3 0.547 0.553 0.592);
            --slate-10: color(display-p3 0.503 0.512 0.549);
            --slate-11: color(display-p3 0.379 0.392 0.421);
            --slate-12: color(display-p3 0.113 0.125 0.14);
            --slate-a1: color(display-p3 0.024 0.024 0.349 / 0.012);
            --slate-a2: color(display-p3 0.024 0.024 0.349 / 0.024);
            --slate-a3: color(display-p3 0.004 0.004 0.204 / 0.059);
            --slate-a4: color(display-p3 0.012 0.012 0.184 / 0.091);
            --slate-a5: color(display-p3 0.004 0.039 0.2 / 0.122);
            --slate-a6: color(display-p3 0.008 0.008 0.165 / 0.15);
            --slate-a7: color(display-p3 0.008 0.027 0.184 / 0.197);
            --slate-a8: color(display-p3 0.004 0.031 0.176 / 0.275);
            --slate-a9: color(display-p3 0.004 0.02 0.106 / 0.455);
            --slate-a10: color(display-p3 0.004 0.027 0.098 / 0.499);
            --slate-a11: color(display-p3 0 0.02 0.063 / 0.62);
            --slate-a12: color(display-p3 0 0.012 0.031 / 0.887);
            --slate-surface: color(display-p3 1 1 1 / 0.8);
        }
    }
}
.dark, .dark-theme {
    --slate-1: #111113;
    --slate-2: #18191b;
    --slate-3: #212225;
    --slate-4: #272a2d;
    --slate-5: #2e3135;
    --slate-6: #363a3f;
    --slate-7: #43484e;
    --slate-8: #5a6169;
    --slate-9: #696e77;
    --slate-10: #777b84;
    --slate-11: #b0b4ba;
    --slate-12: #edeef0;
    --slate-a1: #00000000;
    --slate-a2: #d8f4f609;
    --slate-a3: #ddeaf814;
    --slate-a4: #d3edf81d;
    --slate-a5: #d9edfe25;
    --slate-a6: #d6ebfd30;
    --slate-a7: #d9edff40;
    --slate-a8: #d9edff5d;
    --slate-a9: #dfebfd6d;
    --slate-a10: #e5edfd7b;
    --slate-a11: #f1f7feb5;
    --slate-a12: #fcfdffef;
    --slate-surface: #1f212380;
    --slate-indicator: var(--slate-9);
    --slate-track: var(--slate-9);
}
@supports (color: color(display-p3 1 1 1)) {
    @media (color-gamut: p3) {
        .dark, .dark-theme {
            --slate-1: color(display-p3 0.067 0.067 0.074);
            --slate-2: color(display-p3 0.095 0.098 0.105);
            --slate-3: color(display-p3 0.13 0.135 0.145);
            --slate-4: color(display-p3 0.156 0.163 0.176);
            --slate-5: color(display-p3 0.183 0.191 0.206);
            --slate-6: color(display-p3 0.215 0.226 0.244);
            --slate-7: color(display-p3 0.265 0.28 0.302);
            --slate-8: color(display-p3 0.357 0.381 0.409);
            --slate-9: color(display-p3 0.415 0.431 0.463);
            --slate-10: color(display-p3 0.469 0.483 0.514);
            --slate-11: color(display-p3 0.692 0.704 0.728);
            --slate-12: color(display-p3 0.93 0.933 0.94);
            --slate-a1: color(display-p3 0 0 0 / 0);
            --slate-a2: color(display-p3 0.875 0.992 1 / 0.034);
            --slate-a3: color(display-p3 0.882 0.933 0.992 / 0.077);
            --slate-a4: color(display-p3 0.882 0.953 0.996 / 0.111);
            --slate-a5: color(display-p3 0.878 0.929 0.996 / 0.145);
            --slate-a6: color(display-p3 0.882 0.949 0.996 / 0.183);
            --slate-a7: color(display-p3 0.882 0.929 1 / 0.246);
            --slate-a8: color(display-p3 0.871 0.937 1 / 0.361);
            --slate-a9: color(display-p3 0.898 0.937 1 / 0.42);
            --slate-a10: color(display-p3 0.918 0.945 1 / 0.475);
            --slate-a11: color(display-p3 0.949 0.969 0.996 / 0.708);
            --slate-a12: color(display-p3 0.988 0.992 1 / 0.937);
            --slate-surface: color(display-p3 0.1176 0.1255 0.1333 / 0.5);
        }
    }
}
:root {
    --slate-contrast: white;
}