Ivory

#FFF5F0

Orange

Color Codes

All color formats for development

HEX
#FFF5F0
RGB
rgb(255, 245, 240)
HSL
hsl(20, 100%, 97%)
OKLCH
oklch(0.977 0.013 48.6)
CMYK
cmyk(0%, 4%, 6%, 0%)

Accessibility

WCAG contrast compliance

On White Background

1.07:1

AA AAA

On Black Background

19.57:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#FFF5
100
#FFE7
200
#FFD3
300
#FFB1
400
#FF88
500
#FF66
600
#E04B
700
#B33B
800
#802A
900
#521B
950
#3311

Shades

Darker variations

1#FFD4BE
2#FFB38D
3#FF925B
4#FF712A
5#F75200
6#C64200
7#943100
8#632100
9#311000

Tints

Lighter variations

1#FFF6F1
2#FFF7F3
3#FFF8F4
4#FFF9F6
5#FFFAF7
6#FFFBF9
7#FFFCFA
8#FFFDFC
9#FFFEFD

Tones

Muted variations

1#FEF5F0
2#FDF5F1
3#FDF6F2
4#FCF6F3
5#FBF6F4
6#FAF6F4
7#FAF7F5
8#F9F7F6
9#F8F7F7

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
FFF5
#FFF5F0
BackgroundsSubtle highlightsCard backgrounds
100
FFE7
#FFE7DB
Light backgroundsTable row hoverSkeleton loading
200
FFD3
#FFD3BD
Secondary backgroundsInput backgroundsDividers
300
FFB1
#FFB18A
BordersInactive statesPlaceholder text
400
FF88
#FF884D
Disabled statesSecondary iconsMuted text
500
FF66
#FF661A
Primary brand colorCTAsActive elementsLinks
600
E04B
#E04B00
Hover statesFocus ringsPrimary buttons hover
700
B33B
#B33B00
Active/pressed statesDark mode accentsSecondary text
800
802A
#802A00
Text on light backgroundsHeadingsStrong borders
900
521B
#521B00
Primary textHigh emphasis contentDark headings
950
3311
#331100
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --ivory-50: #FFF5F0;
  --ivory-100: #FFE7DB;
  --ivory-200: #FFD3BD;
  --ivory-300: #FFB18A;
  --ivory-400: #FF884D;
  --ivory-500: #FF661A;
  --ivory-600: #E04B00;
  --ivory-700: #B33B00;
  --ivory-800: #802A00;
  --ivory-900: #521B00;
  --ivory-950: #331100;
}
Generate More ShadesCreate PaletteConvert Color