Amplify UI

Colors

The Amplify UI color palette uses hsl() notation, which defines a color by its hue, saturation and lightness.

Semantic

Heading text

Some sample text for this card.

import { Card, Heading, Text, ThemeProvider } from '@aws-amplify/ui-react';

const theme = {
  name: 'custom-theme',
  tokens: {
    components: {
      card: {
        backgroundColor: { value: '{colors.background.secondary}' },
        outlined: {
          borderColor: { value: '{colors.black}' },
        },
      },
      heading: {
        color: { value: '{colors.secondary[80]}' },
      },
      text: {
        color: { value: '{colors.primary[80]}' },
      },
    },
  },
};

export const ColorsExample = () => {
  return (
    <ThemeProvider theme={theme}>
      <Card variation="outlined">
        <Heading level={6}>Heading text</Heading>
        <Text>Some sample text for this card.</Text>
      </Card>
    </ThemeProvider>
  );
};
.amplify-card {
  background-color: var(--amplify-colors-background-secondary);
}
.amplify-card--outlined {
  border-color: var(--amplify-colors-black);
}
.amplify-heading--6 {
  color: var(--amplify-colors-secondary-80);
}
.amplify-text {
  color: var(--amplify-colors-neutral-80);
}

Font

  • font.primary
    --amplify-colors-font-primary
    var(--amplify-colors-neutral-100)
  • font.secondary
    --amplify-colors-font-secondary
    var(--amplify-colors-neutral-90)
  • font.tertiary
    --amplify-colors-font-tertiary
    var(--amplify-colors-neutral-80)
  • font.disabled
    --amplify-colors-font-disabled
    var(--amplify-colors-neutral-60)
  • font.inverse
    --amplify-colors-font-inverse
    var(--amplify-colors-white)
  • font.interactive
    --amplify-colors-font-interactive
    var(--amplify-colors-primary-80)
  • font.hover
    --amplify-colors-font-hover
    var(--amplify-colors-primary-90)
  • font.focus
    --amplify-colors-font-focus
    var(--amplify-colors-primary-100)
  • font.active
    --amplify-colors-font-active
    var(--amplify-colors-primary-100)
  • font.info
    --amplify-colors-font-info
    var(--amplify-colors-blue-90)
  • font.warning
    --amplify-colors-font-warning
    var(--amplify-colors-orange-90)
  • font.error
    --amplify-colors-font-error
    var(--amplify-colors-red-90)
  • font.success
    --amplify-colors-font-success
    var(--amplify-colors-green-90)

Background

  • background.primary
    --amplify-colors-background-primary
    var(--amplify-colors-white)
  • background.secondary
    --amplify-colors-background-secondary
    var(--amplify-colors-neutral-10)
  • background.tertiary
    --amplify-colors-background-tertiary
    var(--amplify-colors-neutral-20)
  • background.quaternary
    --amplify-colors-background-quaternary
    var(--amplify-colors-neutral-60)
  • background.disabled
    --amplify-colors-background-disabled
    var(--amplify-colors-background-tertiary)
  • background.info
    --amplify-colors-background-info
    var(--amplify-colors-blue-10)
  • background.warning
    --amplify-colors-background-warning
    var(--amplify-colors-orange-10)
  • background.error
    --amplify-colors-background-error
    var(--amplify-colors-red-10)
  • background.success
    --amplify-colors-background-success
    var(--amplify-colors-green-10)

Border

  • border.primary
    --amplify-colors-border-primary
    var(--amplify-colors-neutral-60)
  • border.secondary
    --amplify-colors-border-secondary
    var(--amplify-colors-neutral-40)
  • border.tertiary
    --amplify-colors-border-tertiary
    var(--amplify-colors-neutral-20)
  • border.disabled
    --amplify-colors-border-disabled
    var(--amplify-colors-border-tertiary)
  • border.pressed
    --amplify-colors-border-pressed
    var(--amplify-colors-primary-100)
  • border.focus
    --amplify-colors-border-focus
    var(--amplify-colors-primary-100)
  • border.error
    --amplify-colors-border-error
    var(--amplify-colors-red-80)
  • border.info
    --amplify-colors-border-info
    var(--amplify-colors-blue-80)
  • border.success
    --amplify-colors-border-success
    var(--amplify-colors-green-80)
  • border.warning
    --amplify-colors-border-warning
    var(--amplify-colors-orange-80)

Shadow

  • shadow.primary
    --amplify-colors-shadow-primary
    hsla(210, 50%, 10%, 0.25)
  • shadow.secondary
    --amplify-colors-shadow-secondary
    hsla(210, 50%, 10%, 0.15)
  • shadow.tertiary
    --amplify-colors-shadow-tertiary
    hsla(210, 50%, 10%, 0.05)

Overlay

  • overlay[5]
    --amplify-colors-overlay-5
    hsla(0, 0%, 0%, 0.05)
  • overlay[10]
    --amplify-colors-overlay-10
    hsla(0, 0%, 0%, 0.1)
  • overlay[20]
    --amplify-colors-overlay-20
    hsla(0, 0%, 0%, 0.2)
  • overlay[30]
    --amplify-colors-overlay-30
    hsla(0, 0%, 0%, 0.3)
  • overlay[40]
    --amplify-colors-overlay-40
    hsla(0, 0%, 0%, 0.4)
  • overlay[50]
    --amplify-colors-overlay-50
    hsla(0, 0%, 0%, 0.5)
  • overlay[60]
    --amplify-colors-overlay-60
    hsla(0, 0%, 0%, 0.6)
  • overlay[70]
    --amplify-colors-overlay-70
    hsla(0, 0%, 0%, 0.7)
  • overlay[80]
    --amplify-colors-overlay-80
    hsla(0, 0%, 0%, 0.8)
  • overlay[90]
    --amplify-colors-overlay-90
    hsla(0, 0%, 0%, 0.9)

Brand

Primary

  • primary[10]
    --amplify-colors-primary-10
    var(--amplify-colors-teal-10)
  • primary[20]
    --amplify-colors-primary-20
    var(--amplify-colors-teal-20)
  • primary[40]
    --amplify-colors-primary-40
    var(--amplify-colors-teal-40)
  • primary[60]
    --amplify-colors-primary-60
    var(--amplify-colors-teal-60)
  • primary[80]
    --amplify-colors-primary-80
    var(--amplify-colors-teal-80)
  • primary[90]
    --amplify-colors-primary-90
    var(--amplify-colors-teal-90)
  • primary[100]
    --amplify-colors-primary-100
    var(--amplify-colors-teal-100)

Secondary

  • secondary[10]
    --amplify-colors-secondary-10
    var(--amplify-colors-purple-10)
  • secondary[20]
    --amplify-colors-secondary-20
    var(--amplify-colors-purple-20)
  • secondary[40]
    --amplify-colors-secondary-40
    var(--amplify-colors-purple-40)
  • secondary[60]
    --amplify-colors-secondary-60
    var(--amplify-colors-purple-60)
  • secondary[80]
    --amplify-colors-secondary-80
    var(--amplify-colors-purple-80)
  • secondary[90]
    --amplify-colors-secondary-90
    var(--amplify-colors-purple-90)
  • secondary[100]
    --amplify-colors-secondary-100
    var(--amplify-colors-purple-100)

Palette

Neutral

  • neutral[10]
    --amplify-colors-neutral-10
    hsl(210, 5%, 98%)
  • neutral[20]
    --amplify-colors-neutral-20
    hsl(210, 5%, 94%)
  • neutral[40]
    --amplify-colors-neutral-40
    hsl(210, 5%, 87%)
  • neutral[60]
    --amplify-colors-neutral-60
    hsl(210, 10%, 58%)
  • neutral[80]
    --amplify-colors-neutral-80
    hsl(210, 10%, 40%)
  • neutral[90]
    --amplify-colors-neutral-90
    hsl(210, 25%, 25%)
  • neutral[100]
    --amplify-colors-neutral-100
    hsl(210, 50%, 10%)

Red

  • red[10]
    --amplify-colors-red-10
    hsl(0, 75%, 95%)
  • red[20]
    --amplify-colors-red-20
    hsl(0, 75%, 85%)
  • red[40]
    --amplify-colors-red-40
    hsl(0, 75%, 75%)
  • red[60]
    --amplify-colors-red-60
    hsl(0, 50%, 50%)
  • red[80]
    --amplify-colors-red-80
    hsl(0, 95%, 30%)
  • red[90]
    --amplify-colors-red-90
    hsl(0, 100%, 20%)
  • red[100]
    --amplify-colors-red-100
    hsl(0, 100%, 15%)

Orange

  • orange[10]
    --amplify-colors-orange-10
    hsl(30, 75%, 95%)
  • orange[20]
    --amplify-colors-orange-20
    hsl(30, 75%, 85%)
  • orange[40]
    --amplify-colors-orange-40
    hsl(30, 75%, 75%)
  • orange[60]
    --amplify-colors-orange-60
    hsl(30, 50%, 50%)
  • orange[80]
    --amplify-colors-orange-80
    hsl(30, 95%, 30%)
  • orange[90]
    --amplify-colors-orange-90
    hsl(30, 100%, 20%)
  • orange[100]
    --amplify-colors-orange-100
    hsl(30, 100%, 15%)

Yellow

  • yellow[10]
    --amplify-colors-yellow-10
    hsl(60, 75%, 95%)
  • yellow[20]
    --amplify-colors-yellow-20
    hsl(60, 75%, 85%)
  • yellow[40]
    --amplify-colors-yellow-40
    hsl(60, 75%, 75%)
  • yellow[60]
    --amplify-colors-yellow-60
    hsl(60, 50%, 50%)
  • yellow[80]
    --amplify-colors-yellow-80
    hsl(60, 95%, 30%)
  • yellow[90]
    --amplify-colors-yellow-90
    hsl(60, 100%, 20%)
  • yellow[100]
    --amplify-colors-yellow-100
    hsl(60, 100%, 15%)

Green

  • green[10]
    --amplify-colors-green-10
    hsl(130, 60%, 95%)
  • green[20]
    --amplify-colors-green-20
    hsl(130, 60%, 90%)
  • green[40]
    --amplify-colors-green-40
    hsl(130, 44%, 63%)
  • green[60]
    --amplify-colors-green-60
    hsl(130, 43%, 46%)
  • green[80]
    --amplify-colors-green-80
    hsl(130, 33%, 37%)
  • green[90]
    --amplify-colors-green-90
    hsl(130, 27%, 29%)
  • green[100]
    --amplify-colors-green-100
    hsl(130, 22%, 23%)

Teal

  • teal[10]
    --amplify-colors-teal-10
    hsl(190, 75%, 95%)
  • teal[20]
    --amplify-colors-teal-20
    hsl(190, 75%, 85%)
  • teal[40]
    --amplify-colors-teal-40
    hsl(190, 70%, 70%)
  • teal[60]
    --amplify-colors-teal-60
    hsl(190, 50%, 50%)
  • teal[80]
    --amplify-colors-teal-80
    hsl(190, 95%, 30%)
  • teal[90]
    --amplify-colors-teal-90
    hsl(190, 100%, 20%)
  • teal[100]
    --amplify-colors-teal-100
    hsl(190, 100%, 15%)

Blue

  • blue[10]
    --amplify-colors-blue-10
    hsl(220, 95%, 95%)
  • blue[20]
    --amplify-colors-blue-20
    hsl(220, 85%, 85%)
  • blue[40]
    --amplify-colors-blue-40
    hsl(220, 70%, 70%)
  • blue[60]
    --amplify-colors-blue-60
    hsl(220, 50%, 50%)
  • blue[80]
    --amplify-colors-blue-80
    hsl(220, 95%, 30%)
  • blue[90]
    --amplify-colors-blue-90
    hsl(220, 100%, 20%)
  • blue[100]
    --amplify-colors-blue-100
    hsl(220, 100%, 15%)

Purple

  • purple[10]
    --amplify-colors-purple-10
    hsl(300, 95%, 95%)
  • purple[20]
    --amplify-colors-purple-20
    hsl(300, 85%, 85%)
  • purple[40]
    --amplify-colors-purple-40
    hsl(300, 70%, 70%)
  • purple[60]
    --amplify-colors-purple-60
    hsl(300, 50%, 50%)
  • purple[80]
    --amplify-colors-purple-80
    hsl(300, 95%, 30%)
  • purple[90]
    --amplify-colors-purple-90
    hsl(300, 100%, 20%)
  • purple[100]
    --amplify-colors-purple-100
    hsl(300, 100%, 15%)

Pink

  • pink[10]
    --amplify-colors-pink-10
    hsl(340, 95%, 95%)
  • pink[20]
    --amplify-colors-pink-20
    hsl(340, 90%, 85%)
  • pink[40]
    --amplify-colors-pink-40
    hsl(340, 70%, 70%)
  • pink[60]
    --amplify-colors-pink-60
    hsl(340, 50%, 50%)
  • pink[80]
    --amplify-colors-pink-80
    hsl(340, 95%, 30%)
  • pink[90]
    --amplify-colors-pink-90
    hsl(340, 100%, 20%)
  • pink[100]
    --amplify-colors-pink-100
    hsl(340, 100%, 15%)

Black

  • black
    --amplify-colors-black
    hsl(0, 0%, 0%)

White

  • white
    --amplify-colors-white
    hsl(0, 0%, 100%)

Transparent

  • transparent
    --amplify-colors-transparent
    transparent

Amplify open source software, documentation and community are supported by Amazon Web Services.

© 2024 Amazon Web Services, Inc. and its affiliates. All rights reserved. View the site terms and privacy policy.

Flutter and the related logo are trademarks of Google LLC. We are not endorsed by or affiliated with Google LLC.