# Blue tint palette

The Blue tint palette brings together blue, light blue, and pale blue. The colors span a moderate lightness range, combining strong color with clear contrast. Its bold and dramatic character suits brand mood boards and editorial graphics. Its darkest tone is blue, and its lightest tone is pale blue.

- Also called: Monochrome blue and gray linear swatches
- Seed: `kWh5G30bo_9-rv_tGb_-gk_4`
- Page: https://grabient.com/kWh5G30bo_9-rv_tGb_-gk_4?style=linearSwatches&steps=5
- Drawn as: linear swatches, 5 steps, 90 degrees
- Kinds: dark to light, vivid, cool, monochrome
- Hues: monochromatic
- Contrast of its darkest and lightest colors: 4.8 to 1

## Colors

The name most people give each color, and the text color that reads on it with its contrast.

| Stop | Hex | OKLCH | Name | Text on it |
| --- | --- | --- | --- | --- |
| 1 | `#0065db` | `oklch(53.15% 0.1973 258.06)` | Blue Ruin | white, 5.4 to 1 |
| 2 | `#4a8bec` | `oklch(64.17% 0.1598 258.05)` | Seljuk Blue | black, 6.2 to 1 |
| 3 | `#7eb0fa` | `oklch(75.20% 0.1199 258.05)` | French Sky Blue | black, 9.4 to 1 |
| 4 | `#b4d2ff` | `oklch(85.83% 0.0703 258.04)` | Ice Cold Stare | black, 13.6 to 1 |
| 5 | `#eaf3ff` | `oklch(96.06% 0.0188 258.03)` | Moon White | black, 18.7 to 1 |

## CSS

```css
background: linear-gradient(90deg, #0065db 0.000% 20.000%, #4a8bec 20.000% 40.000%, #7eb0fa 40.000% 60.000%, #b4d2ff 60.000% 80.000%, #eaf3ff 80.000% 100.000%);
background: linear-gradient(90deg, oklch(53.15% 0.1973 258.06) 0.000% 20.000%, oklch(64.17% 0.1598 258.05) 20.000% 40.000%, oklch(75.20% 0.1199 258.05) 40.000% 60.000%, oklch(85.83% 0.0703 258.04) 60.000% 80.000%, oklch(96.06% 0.0188 258.03) 80.000% 100.000%);
```

## Keyframes

5 OKLCH keyframes joined by a Catmull-Rom spline. Hue is unwrapped degrees.

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.531 | 0.2 | 258 |
| 2 | 0.642 | 0.16 | 258 |
| 3 | 0.752 | 0.12 | 258 |
| 4 | 0.858 | 0.07 | 258 |
| 5 | 0.961 | 0.025 | 258 |

## In these collections

- [Tint swatches](https://grabient.com/tint-swatches)

## Other forms

- [JSON](https://grabient.com/kWh5G30bo_9-rv_tGb_-gk_4.json?style=linearSwatches&steps=5)
- [PNG](https://grabient.com/kWh5G30bo_9-rv_tGb_-gk_4.png?style=linearSwatches&steps=5)
- [SVG](https://grabient.com/kWh5G30bo_9-rv_tGb_-gk_4.svg?style=linearSwatches&steps=5)
- [CSS](https://grabient.com/kWh5G30bo_9-rv_tGb_-gk_4.css?style=linearSwatches&steps=5)
- [ASE](https://grabient.com/kWh5G30bo_9-rv_tGb_-gk_4.ase?style=linearSwatches&steps=5)
- [GPL](https://grabient.com/kWh5G30bo_9-rv_tGb_-gk_4.gpl?style=linearSwatches&steps=5)
- [GRD](https://grabient.com/kWh5G30bo_9-rv_tGb_-gk_4.grd?style=linearSwatches&steps=5)
- [Design tokens](https://grabient.com/kWh5G30bo_9-rv_tGb_-gk_4.tokens.json?style=linearSwatches&steps=5)
- [Social card](https://grabient.com/api/og?seed=kWh5G30bo_9-rv_tGb_-gk_4&style=linearSwatches&steps=5)
- [Palettes like this one](https://grabient.com/palettes?q=kWh5G30bo_9-rv_tGb_-gk_4)
- [Guide for agents](https://grabient.com/llms.txt)