Ivory

#FDF8F1

Orange

Color Codes

All color formats for development

HEX
#FDF8F1
RGB
rgb(253, 248, 241)
HSL
hsl(35, 75%, 97%)
OKLCH
oklch(0.981 0.011 76.6)
CMYK
cmyk(0%, 2%, 5%, 1%)

Accessibility

WCAG contrast compliance

On White Background

1.06:1

AA AAA

On Black Background

19.87:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#FDF8
100
#FBEF
200
#F7E2
300
#F0CC
400
#E9B1
500
#E29B
600
#C47E
700
#9C64
800
#7048
900
#472E
950
#2D1D

Shades

Darker variations

1#F7E3C6
2#F1CD9B
3#EBB770
4#E4A244
5#D88B1F
6#AD6F19
7#825313
8#57380C
9#2B1C06

Tints

Lighter variations

1#FDF9F3
2#FDFAF4
3#FEFAF6
4#FEFBF7
5#FEFCF8
6#FEFCFA
7#FEFDFB
8#FFFEFC
9#FFFEFE

Tones

Muted variations

1#FDF8F2
2#FCF8F3
3#FBF8F3
4#FBF8F4
5#FAF8F4
6#FAF8F5
7#F9F8F6
8#F8F8F6
9#F8F7F7

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
FDF8
#FDF8F2
BackgroundsSubtle highlightsCard backgrounds
100
FBEF
#FBEFE0
Light backgroundsTable row hoverSkeleton loading
200
F7E2
#F7E2C5
Secondary backgroundsInput backgroundsDividers
300
F0CC
#F0CC98
BordersInactive statesPlaceholder text
400
E9B1
#E9B163
Disabled statesSecondary iconsMuted text
500
E29B
#E29B36
Primary brand colorCTAsActive elementsLinks
600
C47E
#C47E1C
Hover statesFocus ringsPrimary buttons hover
700
9C64
#9C6416
Active/pressed statesDark mode accentsSecondary text
800
7048
#704810
Text on light backgroundsHeadingsStrong borders
900
472E
#472E0A
Primary textHigh emphasis contentDark headings
950
2D1D
#2D1D06
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --ivory-50: #FDF8F2;
  --ivory-100: #FBEFE0;
  --ivory-200: #F7E2C5;
  --ivory-300: #F0CC98;
  --ivory-400: #E9B163;
  --ivory-500: #E29B36;
  --ivory-600: #C47E1C;
  --ivory-700: #9C6416;
  --ivory-800: #704810;
  --ivory-900: #472E0A;
  --ivory-950: #2D1D06;
}
Generate More ShadesCreate PaletteConvert Color