Skip to content

3-character hex codes should be converted to 6-character hex codes #94

Open
@devend711

Description

@devend711

Some browsers and email clients have trouble with 3-character hex codes:

https://litmus.com/blog/background-colors-html-email

We can help by making sure that any 3-character hex code is turned into the 6-character equivalent.

See this issue in the premailer/premailer repo: premailer/premailer#109

Colors in html emails work best as a six character hex ('#ffffff') rather than '#fff' or 'white'. See sass/sass#343 for details.

Somewhat unfortunately, sass will convert '#ffffff' to 'white'. When premailer inlines css generated by sass, it will insert 'white' instead of '#ffffff'.

sass/sass#343 goes over the sass issue. I believe sass's position is correct by saying this is something that should be fixed in premailer.

Examples of how html email can be broken by using 'white' or '#fff':

https://joevandyk.litmus.com/pub/ddace69 (email with 'white' embedded in the email, same thing happens with '#fff')
https://joevandyk.litmus.com/pub/350f5cf (exact same email, except with '#ffffff' in place of 'white')

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions