HiveBrain v1.2.0
Get Started
← Back to all entries
snippetjavascriptTip

How can I extend a 3-digit color code to a 6-digit color code in JavaScript?

Submitted by: @import:30-seconds-of-code··
0
Viewed 0 times
javascripthowextenddigitcolorcancode

Problem

A 3-digit color code is a shorthand for a 6-digit color code, where each digit is repeated to form the full 6-digit code. For example, #03f is equivalent to #0033ff.
These shorthand codes are quite common, but they pose some challenges when working with them programmatically. Thus, it's often necessary to convert them to the full 6-digit form.
All you have to do is to repeat each digit of the 3-digit code to form the 6-digit code. This can be done using a combination of Array.prototype.map(), String.prototype.split() and Array.prototype.join() to join the mapped array.
In order to account for the possibility of the input string starting with #, you can use Array.prototype.slice() to remove the # from the start of the string, if it's present.

Solution

const extendHex = shortHex =>
  '#' +
  shortHex
    .slice(shortHex.startsWith('#') ? 1 : 0)
    .split('')
    .map(x => x + x)
    .join('');

extendHex('#03f'); // '#0033ff'
extendHex('05a'); // '#0055aa'


All you have to do is to repeat each digit of the 3-digit code to form the 6-digit code. This can be done using a combination of Array.prototype.map(), String.prototype.split() and Array.prototype.join() to join the mapped array.
In order to account for the possibility of the input string starting with #, you can use Array.prototype.slice() to remove the # from the start of the string, if it's present.

Code Snippets

const extendHex = shortHex =>
  '#' +
  shortHex
    .slice(shortHex.startsWith('#') ? 1 : 0)
    .split('')
    .map(x => x + x)
    .join('');

extendHex('#03f'); // '#0033ff'
extendHex('05a'); // '#0055aa'

Context

From 30-seconds-of-code: extend-hex

Revisions (0)

No revisions yet.