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

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

:root, .light, .light-theme {
    --gold-1: #fdfdfc;
    --gold-2: #faf9f2;
    --gold-3: #f2f0e7;
    --gold-4: #eae6db;
    --gold-5: #e1dccf;
    --gold-6: #d8d0bf;
    --gold-7: #cbc0aa;
    --gold-8: #b9a88d;
    --gold-9: #978365;
    --gold-10: #8c7a5e;
    --gold-11: #71624b;
    --gold-12: #3b352b;
    --gold-a1: #55550003;
    --gold-a2: #9d8a000d;
    --gold-a3: #75600018;
    --gold-a4: #6b4e0024;
    --gold-a5: #60460030;
    --gold-a6: #64440040;
    --gold-a7: #63420055;
    --gold-a8: #633d0072;
    --gold-a9: #5332009a;
    --gold-a10: #492d00a1;
    --gold-a11: #362100b4;
    --gold-a12: #130c00d4;
    --gold-surface: #f9f8efcc;
    --gold-indicator: var(--gold-9);
    --gold-track: var(--gold-9);
}
@supports (color: color(display-p3 1 1 1)) {
    @media (color-gamut: p3) {
        :root, .light, .light-theme {
            --gold-1: color(display-p3 0.992 0.992 0.989);
            --gold-2: color(display-p3 0.98 0.976 0.953);
            --gold-3: color(display-p3 0.947 0.94 0.909);
            --gold-4: color(display-p3 0.914 0.904 0.865);
            --gold-5: color(display-p3 0.88 0.865 0.816);
            --gold-6: color(display-p3 0.84 0.818 0.756);
            --gold-7: color(display-p3 0.788 0.753 0.677);
            --gold-8: color(display-p3 0.715 0.66 0.565);
            --gold-9: color(display-p3 0.579 0.517 0.41);
            --gold-10: color(display-p3 0.538 0.479 0.38);
            --gold-11: color(display-p3 0.433 0.386 0.305);
            --gold-12: color(display-p3 0.227 0.209 0.173);
            --gold-a1: color(display-p3 0.349 0.349 0.024 / 0.012);
            --gold-a2: color(display-p3 0.592 0.514 0.024 / 0.048);
            --gold-a3: color(display-p3 0.4 0.357 0.012 / 0.091);
            --gold-a4: color(display-p3 0.357 0.298 0.008 / 0.134);
            --gold-a5: color(display-p3 0.345 0.282 0.004 / 0.185);
            --gold-a6: color(display-p3 0.341 0.263 0.004 / 0.244);
            --gold-a7: color(display-p3 0.345 0.235 0.004 / 0.322);
            --gold-a8: color(display-p3 0.345 0.22 0.004 / 0.436);
            --gold-a9: color(display-p3 0.286 0.18 0 / 0.589);
            --gold-a10: color(display-p3 0.255 0.161 0 / 0.62);
            --gold-a11: color(display-p3 0.433 0.386 0.305);
            --gold-a12: color(display-p3 0.227 0.209 0.173);
            --gold-surface: color(display-p3 0.9765 0.9725 0.9412 / 0.8);
        }
    }
}
.dark, .dark-theme {
    --gold-1: #121211;
    --gold-2: #1b1a17;
    --gold-3: #24231f;
    --gold-4: #2d2b26;
    --gold-5: #38352e;
    --gold-6: #444039;
    --gold-7: #544f46;
    --gold-8: #696256;
    --gold-9: #978365;
    --gold-10: #a39073;
    --gold-11: #cbb99f;
    --gold-12: #e8e2d9;
    --gold-a1: #91911102;
    --gold-a2: #f9e29d0b;
    --gold-a3: #f8ecbb15;
    --gold-a4: #ffeec41e;
    --gold-a5: #feecc22a;
    --gold-a6: #feebcb37;
    --gold-a7: #ffedcd48;
    --gold-a8: #fdeaca5f;
    --gold-a9: #ffdba690;
    --gold-a10: #fedfb09d;
    --gold-a11: #fee7c6c8;
    --gold-a12: #fef7ede7;
    --gold-surface: #25231d80;
    --gold-indicator: var(--gold-9);
    --gold-track: var(--gold-9);
}
@supports (color: color(display-p3 1 1 1)) {
    @media (color-gamut: p3) {
        .dark, .dark-theme {
            --gold-1: color(display-p3 0.071 0.071 0.067);
            --gold-2: color(display-p3 0.104 0.101 0.09);
            --gold-3: color(display-p3 0.141 0.136 0.122);
            --gold-4: color(display-p3 0.177 0.17 0.152);
            --gold-5: color(display-p3 0.217 0.207 0.185);
            --gold-6: color(display-p3 0.265 0.252 0.225);
            --gold-7: color(display-p3 0.327 0.31 0.277);
            --gold-8: color(display-p3 0.407 0.384 0.342);
            --gold-9: color(display-p3 0.579 0.517 0.41);
            --gold-10: color(display-p3 0.628 0.566 0.463);
            --gold-11: color(display-p3 0.784 0.728 0.635);
            --gold-12: color(display-p3 0.906 0.887 0.855);
            --gold-a1: color(display-p3 0.855 0.855 0.071 / 0.005);
            --gold-a2: color(display-p3 0.98 0.89 0.616 / 0.043);
            --gold-a3: color(display-p3 1 0.949 0.753 / 0.08);
            --gold-a4: color(display-p3 1 0.933 0.8 / 0.118);
            --gold-a5: color(display-p3 1 0.949 0.804 / 0.16);
            --gold-a6: color(display-p3 1 0.925 0.8 / 0.215);
            --gold-a7: color(display-p3 1 0.945 0.831 / 0.278);
            --gold-a8: color(display-p3 1 0.937 0.82 / 0.366);
            --gold-a9: color(display-p3 0.996 0.882 0.69 / 0.551);
            --gold-a10: color(display-p3 1 0.894 0.725 / 0.601);
            --gold-a11: color(display-p3 0.784 0.728 0.635);
            --gold-a12: color(display-p3 0.906 0.887 0.855);
            --gold-surface: color(display-p3 0.1412 0.1333 0.1098 / 0.5);
        }
    }
}
:root {
    --gold-contrast: white;
}