Skip to content

Instantly share code, notes, and snippets.

@mioe

mioe/ios-colors.css

Created July 31, 2024 12:55
Show Gist options
  • Save mioe/8a936e34d807a56c131ecb41446e3221 to your computer and use it in GitHub Desktop.
Save mioe/8a936e34d807a56c131ecb41446e3221 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
ios-colors.css
:root {
/* https://developer.apple.com/design/human-interface-guidelines/color#iOS-iPadOS-system-colors */
/* freeze 2024-07-25 */
--light-red: rgb(255, 59, 48);
--dark-red: rgb(255, 69, 58);
--light-accessible-red: rgb(215, 0, 21);
--dark-accessible-red: rgb(255, 105, 97);
--light-orange: rgb(255, 149, 0);
--dark-orange: rgb(255, 159, 10);
--light-accessible-orange: rgb(201, 52, 0);
--dark-accessible-orange: rgb(255, 179, 64);
--light-yellow: rgb(255, 204, 0);
--dark-yellow: rgb(255, 214, 10);
--light-accessible-yellow: rgb(178, 80, 0);
--dark-accessible-yellow: rgb(255, 212, 38);
--light-green: rgb(52, 199, 89);
--dark-green: rgb(48, 209, 88);
--light-accessible-green: rgb(36, 138, 61);
--dark-accessible-green: rgb(48, 219, 91);
--light-mint: rgb(0, 199, 190);
--dark-mint: rgb(99, 230, 226);
--light-accessible-mint: rgb(12, 129, 123);
--dark-accessible-mint: rgb(102, 212, 207);
--light-teal: rgb(48, 176, 199);
--dark-teal: rgb(64, 200, 224);
--light-accessible-teal: rgb(0, 130, 153);
--dark-accessible-teal: rgb(93, 230, 255);
--light-cyan: rgb(50, 173, 230);
--dark-cyan: rgb(100, 210, 255);
--light-accessible-cyan: rgb(0, 113, 164);
--dark-accessible-cyan: rgb(112, 215, 255);
--light-blue: rgb(0, 122, 255);
--dark-blue: rgb(10, 132, 255);
--light-accessible-blue: rgb(0, 64, 221);
--dark-accessible-blue: rgb(64, 156, 255);
--light-indigo: rgb(88, 86, 214);
--dark-indigo: rgb(94, 92, 230);
--light-accessible-indigo: rgb(54, 52, 163);
--dark-accessible-indigo: rgb(125, 122, 255);
--light-purple: rgb(175, 82, 222);
--dark-purple: rgb(191, 90, 242);
--light-accessible-purple: rgb(137, 68, 171);
--dark-accessible-purple: rgb(218, 143, 255);
--light-pink: rgb(255, 45, 85);
--dark-pink: rgb(255, 55, 95);
--light-accessible-pink: rgb(211, 15, 69);
--dark-accessible-pink: rgb(255, 100, 130);
--light-brown: rgb(162, 132, 94);
--dark-brown: rgb(172, 142, 104);
--light-accessible-brown: rgb(127, 101, 69);
--dark-accessible-brown: rgb(181, 148, 105);
--light-gray: rgb(142, 142, 147);
--dark-gray: rgb(142, 142, 147);
--light-accessible-gray: rgb(108, 108, 112);
--dark-accessible-gray: rgb(174, 174, 178);
--light-gray2: rgb(174, 174, 178);
--dark-gray2: rgb(99, 99, 102);
--light-accessible-gray2: rgb(142, 142, 147);
--dark-accessible-gray2: rgb(124, 124, 128);
--light-gray3: rgb(199, 199, 204);
--dark-gray3: rgb(72, 72, 74);
--light-accessible-gray3: rgb(174, 174, 178);
--dark-accessible-gray3: rgb(84, 84, 86);
--light-gray4: rgb(209, 209, 214);
--dark-gray4: rgb(58, 58, 60);
--light-accessible-gray4: rgb(188, 188, 192);
--dark-accessible-gray4: rgb(68, 68, 70);
--light-gray5: rgb(229, 229, 234);
--dark-gray5: rgb(44, 44, 46);
--light-accessible-gray5: rgb(216, 216, 200);
--dark-accessible-gray5: rgb(54, 54, 56);
--light-gray6: rgb(242, 242, 247);
--dark-gray6: rgb(28, 28, 30);
--light-accessible-gray6: rgb(235, 235, 240);
--dark-accessible-gray6: rgb(36, 36, 38);
--black: rgb(0, 0, 0);
--light-white: var(--gray6);
--dark-white: rgb(255, 255 ,255);
color-scheme: light dark;
}
@media (prefers-color-scheme: light) {
:root {
--red: var(--light-red);
--accessible-red: var(--light-accessible-red);
--orange: var(--light-orange);
--accessible-orange: var(--light-accessible-orange);
--yellow: var(--light-yellow);
--accessible-yellow: var(--light-accessible-yellow);
--green: var(--light-green);
--accessible-green: var(--light-accessible-green);
--mint: var(--light-mint);
--accessible-mint: var(--light-accessible-mint);
--teal: var(--light-teal);
--accessible-teal: var(--light-accessible-teal);
--cyan: var(--light-cyan);
--accessible-cyan: var(--light-accessible-cyan);
--blue: var(--light-blue);
--accessible-blue: var(--light-accessible-blue);
--indigo: var(--light-indigo);
--accessible-indigo: var(--light-accessible-indigo);
--purple: var(--light-purple);
--accessible-purple: var(--light-accessible-purple);
--pink: var(--light-pink);
--accessible-pink: var(--light-accessible-pink);
--brown: var(--light-brown);
--accessible-brown: var(--light-accessible-brown);
--gray: var(--light-gray);
--accessible-gray: var(--light-accessible-gray);
--gray2: var(--light-gray2);
--accessible-gray2: var(--light-accessible-gray2);
--gray3: var(--light-gray3);
--accessible-gray3: var(--light-accessible-gray3);
--gray4: var(--light-gray4);
--accessible-gray4: var(--light-accessible-gray4);
--gray5: var(--light-gray5);
--accessible-gray5: var(--light-accessible-gray5);
--gray6: var(--light-gray6);
--accessible-gray6: var(--light-accessible-gray6);
--white: var(--light-white);
}
}
@media (prefers-color-scheme: dark) {
:root {
--red: var(--dark-red);
--accessible-red: var(--dark-accessible-red);
--orange: var(--dark-orange);
--accessible-orange: var(--dark-accessible-orange);
--yellow: var(--dark-yellow);
--accessible-yellow: var(--dark-accessible-yellow);
--green: var(--dark-green);
--accessible-green: var(--dark-accessible-green);
--mint: var(--dark-mint);
--accessible-mint: var(--dark-accessible-mint);
--teal: var(--dark-teal);
--accessible-teal: var(--dark-accessible-teal);
--cyan: var(--dark-cyan);
--accessible-cyan: var(--dark-accessible-cyan);
--blue: var(--dark-blue);
--accessible-blue: var(--dark-accessible-blue);
--indigo: var(--dark-indigo);
--accessible-indigo: var(--dark-accessible-indigo);
--purple: var(--dark-purple);
--accessible-purple: var(--dark-accessible-purple);
--pink: var(--dark-pink);
--accessible-pink: var(--dark-accessible-pink);
--brown: var(--dark-brown);
--accessible-brown: var(--dark-accessible-brown);
--gray: var(--dark-gray);
--accessible-gray: var(--dark-accessible-gray);
--gray2: var(--dark-gray2);
--accessible-gray2: var(--dark-accessible-gray2);
--gray3: var(--dark-gray3);
--accessible-gray3: var(--dark-accessible-gray3);
--gray4: var(--dark-gray4);
--accessible-gray4: var(--dark-accessible-gray4);
--gray5: var(--dark-gray5);
--accessible-gray5: var(--dark-accessible-gray5);
--gray6: var(--dark-gray6);
--accessible-gray6: var(--dark-accessible-gray6);
--white: var(--dark-white);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment