https://developer.apple.com/design/human-interface-guidelines/color#iOS-iPadOS-system-colors

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);
	}
}