Skip to content

Instantly share code, notes, and snippets.

@gbuckingham89
Last active April 27, 2024 16:41
Show Gist options
  • Save gbuckingham89/e124eac593adaa622bb1566526a5b8d4 to your computer and use it in GitHub Desktop.
Save gbuckingham89/e124eac593adaa622bb1566526a5b8d4 to your computer and use it in GitHub Desktop.
iOS system colors for TailwindCSS
// The color palette is based on the iOS system colors.
// See: https://developer.apple.com/design/human-interface-guidelines/foundations/color/#system-colors-ios
// All colors are their "default" at level 500, then the shades above / below were generated by
// https://www.tailwindshades.com - except the grays, which are the straight-up iOS system gray colors.
colors: {
transparent: 'transparent',
white: '#ffffff',
black: '#000000',
gray: {
DEFAULT: '#8E8E93',
50: '#F2F2F7',
100: '#E5E5EA',
200: '#D1D1D6',
300: '#C7C7CC',
400: '#AEAEB2',
500: '#8E8E93',
600: '#636366',
700: '#48484A',
800: '#3A3A3C',
900: '#2C2C2E',
1000: '#1C1C1E',
},
red: {
DEFAULT: '#FF3B30',
50: '#FFE9E8',
100: '#FFD6D3',
200: '#FFAFAA',
300: '#FF8882',
400: '#FF6259',
500: '#FF3B30',
600: '#F70D00',
700: '#BF0A00',
800: '#870700',
900: '#4F0400'
},
orange: {
DEFAULT: '#FF9500',
50: '#FFE1B8',
100: '#FFD9A3',
200: '#FFC87A',
300: '#FFB752',
400: '#FFA629',
500: '#FF9500',
600: '#C77400',
700: '#8F5300',
800: '#573300',
900: '#1F1200'
},
yellow: {
DEFAULT: '#FFCC00',
50: '#FFF1B8',
100: '#FFEDA3',
200: '#FFE47A',
300: '#FFDC52',
400: '#FFD429',
500: '#FFCC00',
600: '#C79F00',
700: '#8F7200',
800: '#574500',
900: '#1F1800'
},
green: {
DEFAULT: '#34C759',
50: '#C3EFCE',
100: '#B3EBC1',
200: '#93E3A7',
300: '#72DA8D',
400: '#52D272',
500: '#34C759',
600: '#289B45',
700: '#1D6E31',
800: '#11421D',
900: '#061509'
},
mint: {
DEFAULT: '#00C7BE',
50: '#80FFF9',
100: '#6BFFF8',
200: '#42FFF6',
300: '#1AFFF5',
400: '#00F0E5',
500: '#00C7BE',
600: '#008F88',
700: '#005753',
800: '#001F1D',
900: '#000000'
},
teal: {
DEFAULT: '#30B0C7',
50: '#BFE8F0',
100: '#AFE2EC',
200: '#8ED7E4',
300: '#6DCBDC',
400: '#4CBFD4',
500: '#30B0C7',
600: '#25889A',
700: '#1A606D',
800: '#0F383F',
900: '#041012'
},
cyan: {
DEFAULT: '#32ADE6',
50: '#D6EEFA',
100: '#C3E7F8',
200: '#9FD9F3',
300: '#7BCAEF',
400: '#56BCEA',
500: '#32ADE6',
600: '#1890C8',
700: '#126C96',
800: '#0C4864',
900: '#062432'
},
blue: {
DEFAULT: '#007AFF',
50: '#B8DAFF',
100: '#A3CFFF',
200: '#7ABAFF',
300: '#52A5FF',
400: '#298FFF',
500: '#007AFF',
600: '#005FC7',
700: '#00448F',
800: '#002957',
900: '#000F1F'
},
indigo: {
DEFAULT: '#5856D6',
50: '#EAEAFA',
100: '#DAD9F6',
200: '#B9B9EE',
300: '#9998E6',
400: '#7877DE',
500: '#5856D6',
600: '#3230C4',
700: '#262597',
800: '#1B1A6A',
900: '#0F0F3D'
},
purple: {
DEFAULT: '#AF52DE',
50: '#F6ECFB',
100: '#EEDBF8',
200: '#DFB9F2',
300: '#CF97EB',
400: '#BF74E5',
500: '#AF52DE',
600: '#9828D0',
700: '#751FA1',
800: '#531672',
900: '#310D43'
},
pink: {
DEFAULT: '#FF2D55',
50: '#FFE5EA',
100: '#FFD0D9',
200: '#FFA7B8',
300: '#FF7F97',
400: '#FF5676',
500: '#FF2D55',
600: '#F4002E',
700: '#BC0024',
800: '#840019',
900: '#4C000E'
},
brown: {
DEFAULT: '#A2845E',
50: '#E5DDD2',
100: '#DED3C5',
200: '#CFBFAC',
300: '#C0AC92',
400: '#B19878',
500: '#A2845E',
600: '#7F6749',
700: '#5B4A35',
800: '#382D20',
900: '#14100C'
},
},
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment