Using a HEX value when customising the Sign in widget page does not render the desired color scheme. The HEX code provided in Customisations > Brands > Theme > Primary color or Secondary color is not accurately represented on the sign-in page. The preview is completely different than the actual sign-in page when applied. 

• Custom domain
• Base domain
• Customisations

This behavior occurs because the Okta Sign-In Widget automatically adjusts colors to maintain WCAG 1.4.3 accessibility compliance. When the chosen primary color (for example, #7f3d55) does not meet the minimum 4.5:1 contrast ratio against the button text color (usually white), the widget modifies the color palette to ensure accessibility. In some cases, it may lighten or darken the selected color, or even change the text color from white to black.

Desired color	Actual outcome

The solution in this situation is to manually edit the Sign in widget code and add the particular line of code that specifically modifies the theme.

NOTE: This option is not available for the default Okta domain brand and can only be performed on a Custom Domain, as highlighted in the Use the code editor documentation.

Design tokens ensure the Sign-In Widget's visual style remains consistent and is easier to update. Tokens replace static values to customize the following:

• Color
• Border
• Font family
• Font size
• Font weight
• Line height
• Spacing

Pass the design token values into the OktaSignIn constructor. For example:

new OktaSignIn({
  theme: {
    tokens: {
      PalettePrimaryMain: '#D11DCA',
      TypographyColorBody: '#00297A',
      TypographyColorHeading: '#00297A',
      TypographyFamilyHeading: 'Helvetica',
      TypographyFamilyBody: 'Helvetica',
      TypographyWeightHeading: 600,
      BorderRadiusMain: '24px',
      Spacing5: '2.85714286rem',
    }
  }
});

config.theme = {"tokens": {"PalettePrimaryMain": "#ff7d55"}};