CSS (or SCSS) file: insert named colors instead of colors

When I type a color name in a css or scss file, PHPStorm suggests colors by name. But then after pressing Enter, it inserts the hexadesimal code, not the named color. Is it possible to insert the named color in text format, not hexadecimal? (I checked settings->code style->css but nothing there).

P.S. I am not using bare color names in stylesheets. Instead, I use sass variables that define colors and I basically have the same variable names as are supported by browsers, although they are sometimes assigned a bit different shades. So, it would be much easier in PHPStorm to press Enter and then insert just "$" sign before the color name, instead of typing the whole color name.


Hi there,

I do not know about "named colors" vs "hex colors" issue you are talking here (works just fine for me in LESS -- inserts color name as is) .. and do not work with SCSS, but have you tried typing $ and then invoke code completion (manually, if required: Ctrl+Space).

I'm working with LESS .. and variables start with @ -- works for me (it will list ALL variables, not just color ones, but that's OK). For example:

.my-style {
     color: @[CTRL+SPACE]


Please note: I do not use automatic code completion, I always invoke it manually ... so I do not need to close unwanted popups.


In my case it works like this:
a) when typing "blue" (in order to insert something blue) the popup appears and I can use arrows to choose the color. But as soon as I hit Tab to insert the chosen color, the hexadecimal is inserted, not named. So, e.g. instead of "blueviolet" the inserted text is "#8a2be2".
b) when typing "$blue" the popup appears and I can insert my "$blueviolet" variable. But the popup has no colors, like in case of typing just "blue", it has only variable names. So, I prefere to copy and paste the color from my html sample, because I don't remember them by heart. But it would be more comfortable to use PHPStorm.


1) TBH -- I do not know what may be causing such behavior. Maybe there is some setting .. but I have no clue where to look for it

2) As I dirty workaround (usability depends on how many color variable you have there .. and the size of your screen):

  • open file with colors in separate tab and move it to separate view (right click on editor tab and "Split Vertically"
  • make that tab very small -- so that you can see gutter and variable names only
  • when you invoke completion in another tab .. you should be able to see your variables on the side (check gutter for actual colors)

Other than that -- you are alwys welcome to submit Feature Request ticket to the Issue Tracker


It's almost 5 screens (around 150 colors). Maybe I'll file a feature request later. Back to copy paste then :)

P.S. Actually the idea with splitting window is very useful in this case! (just need to limit the colors)


It's not my business .. and I have no idea what exactly you are doing there .. but 5 screens with colors!? -- seems a way too many as for me. Would not it be easier to name color variables by what they do (purpose) rather than actual color (except the most obvious cases) ?


Yes, exactly what I thought after splitting the window and I even edited my previous post. Thanks!


Please sign in to leave a comment.