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

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

:root, .light, .light-theme {
    --amber-1: #fefdfb;
    --amber-2: #fefbe9;
    --amber-3: #fff7c2;
    --amber-4: #ffee9c;
    --amber-5: #fbe577;
    --amber-6: #f3d673;
    --amber-7: #e9c162;
    --amber-8: #e2a336;
    --amber-9: #ffc53d;
    --amber-10: #ffba18;
    --amber-11: #ab6400;
    --amber-12: #4f3422;
    --amber-a1: #c0800004;
    --amber-a2: #f4d10016;
    --amber-a3: #ffde003d;
    --amber-a4: #ffd40063;
    --amber-a5: #f8cf0088;
    --amber-a6: #eab5008c;
    --amber-a7: #dc9b009d;
    --amber-a8: #da8a00c9;
    --amber-a9: #ffb300c2;
    --amber-a10: #ffb300e7;
    --amber-a11: #ab6400;
    --amber-a12: #341500dd;
    --amber-surface: #fefae4cc;
    --amber-indicator: var(--amber-9);
    --amber-track: var(--amber-9);
}
@supports (color: color(display-p3 1 1 1)) {
    @media (color-gamut: p3) {
        :root, .light, .light-theme {
            --amber-1: color(display-p3 0.995 0.992 0.985);
            --amber-2: color(display-p3 0.994 0.986 0.921);
            --amber-3: color(display-p3 0.994 0.969 0.782);
            --amber-4: color(display-p3 0.989 0.937 0.65);
            --amber-5: color(display-p3 0.97 0.902 0.527);
            --amber-6: color(display-p3 0.936 0.844 0.506);
            --amber-7: color(display-p3 0.89 0.762 0.443);
            --amber-8: color(display-p3 0.85 0.65 0.3);
            --amber-9: color(display-p3 1 0.77 0.26);
            --amber-10: color(display-p3 0.959 0.741 0.274);
            --amber-11: color(display-p3 0.64 0.4 0);
            --amber-12: color(display-p3 0.294 0.208 0.145);
            --amber-a1: color(display-p3 0.757 0.514 0.024 / 0.016);
            --amber-a2: color(display-p3 0.902 0.804 0.008 / 0.079);
            --amber-a3: color(display-p3 0.965 0.859 0.004 / 0.22);
            --amber-a4: color(display-p3 0.969 0.82 0.004 / 0.35);
            --amber-a5: color(display-p3 0.933 0.796 0.004 / 0.475);
            --amber-a6: color(display-p3 0.875 0.682 0.004 / 0.495);
            --amber-a7: color(display-p3 0.804 0.573 0 / 0.557);
            --amber-a8: color(display-p3 0.788 0.502 0 / 0.699);
            --amber-a9: color(display-p3 1 0.686 0 / 0.742);
            --amber-a10: color(display-p3 0.945 0.643 0 / 0.726);
            --amber-a11: color(display-p3 0.64 0.4 0);
            --amber-a12: color(display-p3 0.294 0.208 0.145);
            --amber-surface: color(display-p3 0.9922 0.9843 0.902 / 0.8);
        }
    }
}
.dark, .dark-theme {
    --amber-1: #16120c;
    --amber-2: #1d180f;
    --amber-3: #302008;
    --amber-4: #3f2700;
    --amber-5: #4d3000;
    --amber-6: #5c3d05;
    --amber-7: #714f19;
    --amber-8: #8f6424;
    --amber-9: #ffc53d;
    --amber-10: #ffd60a;
    --amber-11: #ffca16;
    --amber-12: #ffe7b3;
    --amber-a1: #e63c0006;
    --amber-a2: #fd9b000d;
    --amber-a3: #fa820022;
    --amber-a4: #fc820032;
    --amber-a5: #fd8b0041;
    --amber-a6: #fd9b0051;
    --amber-a7: #ffab2567;
    --amber-a8: #ffae3587;
    --amber-a9: #ffc53d;
    --amber-a10: #ffd60a;
    --amber-a11: #ffca16;
    --amber-a12: #ffe7b3;
    --amber-surface: #271f1380;
    --amber-indicator: var(--amber-9);
    --amber-track: var(--amber-9);
}
@supports (color: color(display-p3 1 1 1)) {
    @media (color-gamut: p3) {
        .dark, .dark-theme {
            --amber-1: color(display-p3 0.082 0.07 0.05);
            --amber-2: color(display-p3 0.111 0.094 0.064);
            --amber-3: color(display-p3 0.178 0.128 0.049);
            --amber-4: color(display-p3 0.239 0.156 0);
            --amber-5: color(display-p3 0.29 0.193 0);
            --amber-6: color(display-p3 0.344 0.245 0.076);
            --amber-7: color(display-p3 0.422 0.314 0.141);
            --amber-8: color(display-p3 0.535 0.399 0.189);
            --amber-9: color(display-p3 1 0.77 0.26);
            --amber-10: color(display-p3 1 0.87 0.15);
            --amber-11: color(display-p3 1 0.8 0.29);
            --amber-12: color(display-p3 0.984 0.909 0.726);
            --amber-a1: color(display-p3 0.992 0.298 0 / 0.017);
            --amber-a2: color(display-p3 0.988 0.651 0 / 0.047);
            --amber-a3: color(display-p3 1 0.6 0 / 0.118);
            --amber-a4: color(display-p3 1 0.557 0 / 0.185);
            --amber-a5: color(display-p3 1 0.592 0 / 0.24);
            --amber-a6: color(display-p3 1 0.659 0.094 / 0.299);
            --amber-a7: color(display-p3 1 0.714 0.263 / 0.383);
            --amber-a8: color(display-p3 0.996 0.729 0.306 / 0.5);
            --amber-a9: color(display-p3 1 0.769 0.259);
            --amber-a10: color(display-p3 1 0.871 0.149);
            --amber-a11: color(display-p3 1 0.8 0.29);
            --amber-a12: color(display-p3 0.984 0.909 0.726);
            --amber-surface: color(display-p3 0.1412 0.1176 0.0784 / 0.5);
        }
    }
}
:root {
    --amber-contrast: #21201c;
}
@supports (color: color-mix(in oklab, white, black)) {
    .dark,
.dark-theme {
        --amber-track: color-mix(in oklab, var(--amber-8), var(--amber-9) 75%);
    }
}