Apple Colors

A collection of Apple Colors in form of CSS Variables.

Use with a CDN

To rapidly include the minified production file in your webpage.

iOS, iPadOS Variant

<!-- Default -->
<link 
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/gh/KunalTanwar/apple-colors/dist/css/iOS-iPadOS/colors.min.css" 
/>

<!-- Accessible -->
<link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/gh/KunalTanwar/apple-colors/dist/css/iOS-iPadOS/accessible-colors.min.css"
/>

/* Default */
@import 'https://cdn.jsdelivr.net/gh/KunalTanwar/apple-colors/dist/css/iOS-iPadOS/colors.min.css';

/* Accessible */
@import 'https://cdn.jsdelivr.net/gh/KunalTanwar/apple-colors/dist/css/iOS-iPadOS/accessible-colors.min.css';

macOS Variant

<!-- Default -->
<link 
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/gh/KunalTanwar/apple-colors/dist/css/macOS/colors.min.css" 
/>

<!-- Vibrant -->
<link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/gh/KunalTanwar/apple-colors/dist/css/macOS/vibrant-colors.min.css"
/>

<!-- Accessible -->
<link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/gh/KunalTanwar/apple-colors/dist/css/macOS/accessible-colors.min.css"
/>

<!-- Accessible + Vibrant -->
<link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/gh/KunalTanwar/apple-colors/dist/css/macOS/accessible-vibrant-colors.min.css"
/>

/* Default */
@import 'https://cdn.jsdelivr.net/gh/KunalTanwar/apple-colors/dist/css/macOS/colors.min.css';

/* Vibrant */
@import 'https://cdn.jsdelivr.net/gh/KunalTanwar/apple-colors/dist/css/macOS/vibrant-colors.min.css';

/* Accessible */
@import 'https://cdn.jsdelivr.net/gh/KunalTanwar/apple-colors/dist/css/macOS/accessible-colors.min.css';

/* Accessible + Vibrant */
@import 'https://cdn.jsdelivr.net/gh/KunalTanwar/apple-colors/dist/css/macOS/accessible-vibrant-colors.min.css';

watchOS Variant

<link 
    rel="stylesheet" 
    href="https://cdn.jsdelivr.net/gh/KunalTanwar/apple-colors/dist/css/watchOS/colors.min.css"
/>

@import 'https://cdn.jsdelivr.net/gh/KunalTanwar/apple-colors/dist/css/watchOS/colors.min.css';

View Raw (SCSS Version)

• iOS, iPadOS
  • Default
  • Accessible
• macOS
  • Default
  • Vibrant
  • Accessible
  • Accessible + Vibrant
• watchOS