blob: 8aa8c281171687c31d715f16fcec66180274bce9 [file] [log] [blame] [view] [edit]
<!--docs:
title: "Palettes"
layout: detail
section: components
excerpt: "The Palettes component provides Material color palettes."
iconId: color
path: /catalog/palette/
api_doc_root: true
-->
# Palettes
The Palettes component provides Material colors organized into similar palettes.
## Design & API Documentation
<ul class="icon-list">
<li class="icon-list-item icon-list-item--spec"><a href="https://material.io/go/design-color-theming#color-color-palette">Material Design guidelines: Color palettes</a></li>
<li class="icon-list-item icon-list-item--link"><a href="https://github.com/material-components/material-components-ios/blob/develop/components/Palettes/src/MDCPalettes.h">API: MDCPalette</a></li>
</ul>
- - -
## Installation
### Installation with CocoaPods
To add this component to your Xcode project using CocoaPods, add the following to your `Podfile`:
```bash
pod 'MaterialComponents/Palettes'
```
<!--{: .code-renderer.code-renderer--install }-->
Then, run the following command:
```bash
pod install
```
- - -
## Usage
### Importing
Before using Palettes, you'll need to import it:
<!--<div class="material-code-render" markdown="1">-->
#### Swift
```swift
import MaterialComponents.MaterialPalettes
```
#### Objective-C
```objc
#import "MaterialPalettes.h"
```
<!--</div>-->
### Using palettes
Much like UIColor objects, MDCPalette objects are immutable static objects you can use to obtain
Material colors. All palettes have a set of tints with lower numbers being lighter colors and higher
numbers being darker colors. The 500 tint is the most common representative color for its respective
palette. Most palettes (but not all) also have a set of accent colors following a similar naming
scheme.
- - -
## Examples
<!--<div class="material-code-render" markdown="1">-->
#### Swift
```swift
view.backgroundColor = MDCPalette.green.tint500
```
#### Objective-C
```objc
self.view.backgroundColor = MDCPalette.greenPalette.tint500;
```
<!--</div>-->