Ivory

#FEF8F1

Orange

Color Codes

All color formats for development

HEX
#FEF8F1
RGB
rgb(254, 248, 241)
HSL
hsl(32, 87%, 97%)
OKLCH
oklch(0.982 0.011 71.9)
CMYK
cmyk(0%, 2%, 5%, 0%)

Accessibility

WCAG contrast compliance

On White Background

1.05:1

AA AAA

On Black Background

19.91:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#FEF8
100
#FDEE
200
#FBE0
300
#F7C8
400
#F3AB
500
#F093
600
#D277
700
#A75E
800
#7743
900
#4C2B
950
#301B

Shades

Darker variations

1#FBE0C2
2#F8C994
3#F4B266
4#F19B38
5#E78310
6#B9690D
7#8B4F0A
8#5D3406
9#2E1A03

Tints

Lighter variations

1#FEF9F2
2#FEF9F4
3#FEFAF5
4#FEFBF6
5#FFFBF8
6#FFFCF9
7#FFFDFB
8#FFFEFC
9#FFFEFE

Tones

Muted variations

1#FDF8F1
2#FDF8F2
3#FCF8F3
4#FBF8F3
5#FBF8F4
6#FAF8F5
7#F9F7F5
8#F9F7F6
9#F8F7F7

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
FEF8
#FEF8F1
BackgroundsSubtle highlightsCard backgrounds
100
FDEE
#FDEEDE
Light backgroundsTable row hoverSkeleton loading
200
FBE0
#FBE0C1
Secondary backgroundsInput backgroundsDividers
300
F7C8
#F7C891
BordersInactive statesPlaceholder text
400
F3AB
#F3AB58
Disabled statesSecondary iconsMuted text
500
F093
#F09328
Primary brand colorCTAsActive elementsLinks
600
D277
#D2770F
Hover statesFocus ringsPrimary buttons hover
700
A75E
#A75E0C
Active/pressed statesDark mode accentsSecondary text
800
7743
#774308
Text on light backgroundsHeadingsStrong borders
900
4C2B
#4C2B05
Primary textHigh emphasis contentDark headings
950
301B
#301B03
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --ivory-50: #FEF8F1;
  --ivory-100: #FDEEDE;
  --ivory-200: #FBE0C1;
  --ivory-300: #F7C891;
  --ivory-400: #F3AB58;
  --ivory-500: #F09328;
  --ivory-600: #D2770F;
  --ivory-700: #A75E0C;
  --ivory-800: #774308;
  --ivory-900: #4C2B05;
  --ivory-950: #301B03;
}
Generate More ShadesCreate PaletteConvert Color