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

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

:root, .light, .light-theme {
    --indigo-1: #fdfdfe;
    --indigo-2: #f7f9ff;
    --indigo-3: #edf2fe;
    --indigo-4: #e1e9ff;
    --indigo-5: #d2deff;
    --indigo-6: #c1d0ff;
    --indigo-7: #abbdf9;
    --indigo-8: #8da4ef;
    --indigo-9: #3e63dd;
    --indigo-10: #3358d4;
    --indigo-11: #3a5bc7;
    --indigo-12: #1f2d5c;
    --indigo-a1: #00008002;
    --indigo-a2: #0040ff08;
    --indigo-a3: #0047f112;
    --indigo-a4: #0044ff1e;
    --indigo-a5: #0044ff2d;
    --indigo-a6: #003eff3e;
    --indigo-a7: #0037ed54;
    --indigo-a8: #0034dc72;
    --indigo-a9: #0031d2c1;
    --indigo-a10: #002ec9cc;
    --indigo-a11: #002bb7c5;
    --indigo-a12: #001046e0;
    --indigo-surface: #f5f8ffcc;
    --indigo-indicator: var(--indigo-9);
    --indigo-track: var(--indigo-9);
}
@supports (color: color(display-p3 1 1 1)) {
    @media (color-gamut: p3) {
        :root, .light, .light-theme {
            --indigo-1: color(display-p3 0.992 0.992 0.996);
            --indigo-2: color(display-p3 0.971 0.977 0.998);
            --indigo-3: color(display-p3 0.933 0.948 0.992);
            --indigo-4: color(display-p3 0.885 0.914 1);
            --indigo-5: color(display-p3 0.831 0.87 1);
            --indigo-6: color(display-p3 0.767 0.814 0.995);
            --indigo-7: color(display-p3 0.685 0.74 0.957);
            --indigo-8: color(display-p3 0.569 0.639 0.916);
            --indigo-9: color(display-p3 0.276 0.384 0.837);
            --indigo-10: color(display-p3 0.234 0.343 0.801);
            --indigo-11: color(display-p3 0.256 0.354 0.755);
            --indigo-12: color(display-p3 0.133 0.175 0.348);
            --indigo-a1: color(display-p3 0.02 0.02 0.51 / 0.008);
            --indigo-a2: color(display-p3 0.024 0.161 0.863 / 0.028);
            --indigo-a3: color(display-p3 0.008 0.239 0.886 / 0.067);
            --indigo-a4: color(display-p3 0.004 0.247 1 / 0.114);
            --indigo-a5: color(display-p3 0.004 0.235 1 / 0.169);
            --indigo-a6: color(display-p3 0.004 0.208 0.984 / 0.232);
            --indigo-a7: color(display-p3 0.004 0.176 0.863 / 0.314);
            --indigo-a8: color(display-p3 0.004 0.165 0.812 / 0.432);
            --indigo-a9: color(display-p3 0 0.153 0.773 / 0.726);
            --indigo-a10: color(display-p3 0 0.137 0.737 / 0.765);
            --indigo-a11: color(display-p3 0.256 0.354 0.755);
            --indigo-a12: color(display-p3 0.133 0.175 0.348);
            --indigo-surface: color(display-p3 0.9647 0.9725 0.9961 / 0.8);
        }
    }
}
.dark, .dark-theme {
    --indigo-1: #11131f;
    --indigo-2: #141726;
    --indigo-3: #182449;
    --indigo-4: #1d2e62;
    --indigo-5: #253974;
    --indigo-6: #304384;
    --indigo-7: #3a4f97;
    --indigo-8: #435db1;
    --indigo-9: #3e63dd;
    --indigo-10: #5472e4;
    --indigo-11: #9eb1ff;
    --indigo-12: #d6e1ff;
    --indigo-a1: #1133ff0f;
    --indigo-a2: #3354fa17;
    --indigo-a3: #2f62ff3c;
    --indigo-a4: #3566ff57;
    --indigo-a5: #4171fd6b;
    --indigo-a6: #5178fd7c;
    --indigo-a7: #5a7fff90;
    --indigo-a8: #5b81feac;
    --indigo-a9: #4671ffdb;
    --indigo-a10: #5c7efee3;
    --indigo-a11: #9eb1ff;
    --indigo-a12: #d6e1ff;
    --indigo-surface: #171d3b80;
    --indigo-indicator: var(--indigo-9);
    --indigo-track: var(--indigo-9);
}
@supports (color: color(display-p3 1 1 1)) {
    @media (color-gamut: p3) {
        .dark, .dark-theme {
            --indigo-1: color(display-p3 0.068 0.074 0.118);
            --indigo-2: color(display-p3 0.081 0.089 0.144);
            --indigo-3: color(display-p3 0.105 0.141 0.275);
            --indigo-4: color(display-p3 0.129 0.18 0.369);
            --indigo-5: color(display-p3 0.163 0.22 0.439);
            --indigo-6: color(display-p3 0.203 0.262 0.5);
            --indigo-7: color(display-p3 0.245 0.309 0.575);
            --indigo-8: color(display-p3 0.285 0.362 0.674);
            --indigo-9: color(display-p3 0.276 0.384 0.837);
            --indigo-10: color(display-p3 0.354 0.445 0.866);
            --indigo-11: color(display-p3 0.63 0.69 1);
            --indigo-12: color(display-p3 0.848 0.881 0.99);
            --indigo-a1: color(display-p3 0.071 0.212 0.996 / 0.055);
            --indigo-a2: color(display-p3 0.251 0.345 0.988 / 0.085);
            --indigo-a3: color(display-p3 0.243 0.404 1 / 0.223);
            --indigo-a4: color(display-p3 0.263 0.42 1 / 0.324);
            --indigo-a5: color(display-p3 0.314 0.451 1 / 0.4);
            --indigo-a6: color(display-p3 0.361 0.49 1 / 0.467);
            --indigo-a7: color(display-p3 0.388 0.51 1 / 0.547);
            --indigo-a8: color(display-p3 0.404 0.518 1 / 0.652);
            --indigo-a9: color(display-p3 0.318 0.451 1 / 0.824);
            --indigo-a10: color(display-p3 0.404 0.506 1 / 0.858);
            --indigo-a11: color(display-p3 0.63 0.69 1);
            --indigo-a12: color(display-p3 0.848 0.881 0.99);
            --indigo-surface: color(display-p3 0.0941 0.1098 0.2196 / 0.5);
        }
    }
}
:root {
    --indigo-contrast: white;
}