Giter Club home page Giter Club logo

name-that-color-intellij-plugin's Introduction

Name That Color - Android Studio Plugin

Introduction

When I get a new color to set in my Android app, I never know how to call it.

I used the website Name That Color for years, and I wanted to have it integrated inside Android Studio, so I ported its JS library to Kotlin and built this IntelliJ plugin around it.

Besides its long list of colors, users requested to add the material colors names, so we can now name our colors as material colors as well.

This plugin lets you insert a name for a color you copy-paste or type in an android resource file.

Usage

Two options are available: Clipboard and Quick Fix.

Clipboard

When you copy your color to add it in your app, you can use CONTROL+SPACE instead of pasting it to insert directly the right <color> tag.

after entering CONTROL+SPACE

Quick Fix

You can insert "aaa" and an error warning in the form of a Quick Fix will show up so you can replace "aaa" with its own <color name="silver_chalice">#aaa</color> tag by using ALT+ENTER.

after entering ALT+ENTER

Color Input

The Plugin accepts all formats of colors allowed in Android (lowercase or uppercase), and you don't need to prefix your color with "#":

  • Color
    • abc -> #abc
    • #abc -> #abc
    • aBc -> #aBc
    • ab12dc -> #ab12dc
    • #ab12dc -> #ab12dc
  • Alpha + Color
    • 6abc -> #6abc
    • #6abc -> #6abc
    • 60ab12dc -> #60ab12dc
    • #60ab12dc -> #60ab12dc

Names

Name that color

If you chose to use "Name that color", this list of colors is used. If the exact color is not found, the algorithm will find the closest match, if possible.

Examples
  • Color
    • abc -> <color name="casper">#abc</color>
    • ab12dc -> <color name="electric_violet">#ab12dc</color>
  • Alpha + Color
    • 6abc -> <color name="casper_alpha_40">#6abc</color>
    • 60ab12dc -> <color name="electric_violet_alpha_38">#60ab12dc</color>
  • Alpha(%) + Color
    • 40%abc -> <color name="casper_alpha_40">#66AABBCC</color>
    • 38%ab12dc -> <color name="electric_violet_alpha_38">#61AB12DC</color>

Name that material color

If you chose to use "Name that material color", this list of material colors is used. If the exact color is not found, the algorithm will find the closest match, if possible.

Examples
  • Color
    • abc -> <color name="blue_grey_200">#abc</color>
    • ab12dc -> <color name="purple_a700">#ab12dc</color>
  • Alpha + Color
    • 6abc -> <color name="blue_grey_200_alpha_40">#6abc</color>
    • 60ab12dc -> <color name="purple_a700_alpha_38">#60ab12dc</color>
  • Alpha(%) + Color
    • 40%abc -> <color name="blue_grey_200_alpha_40">#66AABBCC</color>
    • 38%ab12dc -> <color name="purple_a700_alpha_38">#61AB12DC</color>

Install

In Android Studio, open Settings > Plugins > Browse Plugins and type "name that color".

Thanks

I'd like to thank aednlaxer for submitting bugs and ideas!

License

This plugin is released under the: Creative Commons License: Attribution 2.5 http://creativecommons.org/licenses/by/2.5/

name-that-color-intellij-plugin's People

Contributors

galex avatar lucaseron avatar pentiumao avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

name-that-color-intellij-plugin's Issues

Strings "add" word considered a color

Steps to reproduce:

  1. Create a string resource with the name "add"
  2. IntelliJ errors and wars this as a color

Actual result:
Warnings

Expected result:
No warnings

update README

Update the readme with two new gifs / images:

  1. Copied color in the clipboard and typing CTRL+SPACE
  2. Writing a color in the file and letting the quick fix show it can fix it (warning) and then typing ALT+ENTER

Show those for normal colors and for material colors.

Support for Jetpack Compose

Jetpack Compose will be stable on July this year. Will this plugin support Jetpack Compose soon?

It will be very useful to use this plugin on Compose.

How color system works in Compose

Add auto completion

When a color is selected in the document and it is not inside a color xml tag already, provide the auto completion on a valid hexadecimal color text.

Add a quickfix

When a color is copied inside the document, provide a quickfix so the user does not need to move its carret till the text to apply the quickfix

Plugin doesn't work in the Android Studio 3.2.1

The Plugin isn't working in the latest version of Android Studio (no context dialog is showed).

Android Studio 3.2.1
Build #AI-181.5540.7.32.5056338, built on October 9, 2018
JRE: 1.8.0_152-release-1136-b06 x86_64
JVM: OpenJDK 64-Bit Server VM by JetBrains s.r.o
macOS 10.14

Plugin Version: v0.9.1 updated 03.02.18

Fix usage of "place" parameter in CompletionContributor.extend()

Find and fix use of "place" parameter in CompletionContributor.extend().
Especially the fact that what can be seen in the PsiViewer elements does not seem to be correct.

  • PsiWhiteSpace inside xmlText inside xmlTag with name resources
  • PsiWhiteSpace inside xmlText
  • PsiWhiteSpace

Android Studio 4+

Plugin Error: Plugin "Name That Color" is incompatible (target build range is 171 to 192.*).

Android Studio freezes

After installing this plugin I noticed repeated freezes while typing code, waiting doesn't work.

After killing AS and reopening I also notice that the last few files edited were reverted, which adds to the severity of the problem.

Disabling the plugin made AS usable again.

Tried on AS 3.0.1 stable and 3.1 beta 4.

The problem with ColorNameFinder's algorithm

I found one problem when I name the color of #444444.
"mine_shaft" was given by plugin, the same as the color of #222222, but they are a little bit different.
Then I input #444444 on the website name that color, but I got the name of "Tundora".

Steps to reproduce:

println(ColorNameFinder.findColor(HexColor("#444444")))

Actual result:

(#444444, Color(hexCode=323232, name=Mine Shaft, rgb=Rgb(r=50, g=50, b=50), hsl=Hsl(h=0, s=0, l=20)))

Expected result:

(#444444, Color(hexCode=4A4244, name=Tundora, rgb=Rgb(r=74, g=66, b=68), hsl=Hsl(h=345, s=6, l=27)))

I think the problem is at this line after I checked the source of ntc:

val ndf2 = Math.pow((h - col.hsl.h).toDouble(), 2.0).toInt() + Math.pow((s - col.hsl.s).toDouble(), 2.0).toInt() + Math.pow((l - col.hsl.l).toDouble(), 2.0).toInt()

Let's look at the HSL value of three colors:

#4A4244  Rgb(r=74, g=66, b=68) Hsl(h=345, s=6, l=27)
#323232  Rgb(r=50, g=50, b=50) Hsl(h=0, s=0, l=20)
#444444  Rgb(r=68, g=68, b=68) Hsl(h=0, s=0, l=27)

Because H in HSL represents a degree, the delta value between #4A4244 and #444444 should be 15 but not 345. As a result, it makes #323232 be the closest color to #444444.

The fix should be something like this:

private fun deltaOfTwoDegree(l: Int, r: Int): Int {
    var delta = abs(l - r)
    if (delta >= 180) {
        delta = (360 - delta)
    }
    return delta
}

Hope it helps.

Plugin doesn't work with lowercase values

Plugin doesn't work with colors written in lowercase:

  • #fafafa gives no suggestions but #FAFAFA gives alabaster and grey_50
  • #2a000000 gives no suggestions but #2A000000 gives black_16

Plugin version 1.2.0
Android Studio version 3.0.1

Not working with #AARRGGBB

Plugin is not showing autocomplete items for ARGB value.

Steps to reproduce:

  1. Copy #80FAFAFA (alabaster, 50% alpha) to the clipboard
  2. Try to use plugin in the colors.xml -> No suggestions message is displayed

Expected behavior: plugin autocompletes to

<color name="alabaster_50">#80fafafa</color>

where 50 is a transparency value.

Name that material color

As mentioned in this Reddit post, the same functionality would be useful for the Material Colors.

For this the project will become a library module which will build two plugins:

  • name that color (current one)
  • name that material color (new)

Not compatible after update

this is version of android studio I use
Android Studio 4.1.2
Build #AI-201.8743.12.41.7042882, built on December 20, 2020
Runtime version: 1.8.0_242-release-1644-b01 amd64
VM: OpenJDK 64-Bit Server VM by JetBrains s.r.o
Windows 10 10.0
GC: ParNew, ConcurrentMarkSweep
Memory: 8158M
Cores: 4
Registry: ide.new.welcome.screen.force=true, external.system.auto.import.disabled=true, ide.balloon.shadow.size=0
Non-Bundled Plugins: PlantUML integration, com.intellij.apacheConfig, CheckStyle-IDEA, org.jetbrains.kotlin, com.codota.csp.intellij, com.potterhsu.jsonviewer, mobi.hsz.idea.gitignore, com.chrisrm.idea.MaterialThemeUI, izhangzhihao.rainbow.brackets, com.atlassian.bitbucket.references, wu.seal.tool.jsontokotlin

Misleading color names

After fix for #5 and adding Material Design colors, one name can mean different colors:

  • #FFEBEE gives red_50 as per Material Design palette
  • #80FF0000 gives red_50 as "red with 50% opacity"

Maybe it's better to use "red50" (no underscore) for Material Design colors, keep "red_50" for transparent colors.

Plugin version 1.2.0
Android Studio version 3.0.1

Same name for different shades of color.

I used #6002ee and #5300e8 these colors and choose name that material color and for the both colors it used deep_purple_a700 this name, also the name of theses color on material.io is purple 500 and purple 600.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.