Giter VIP home page Giter VIP logo

obsidian-color-palette's Introduction

Color Palette

Create beautiful & functional color palettes that enhance the appearance of your notes.

Color Palette Demo

Key Features

  • Supports most CSS color formats (including Hex, RGB, HSL, etc.)
  • Create color palettes from popular palette websites like coolors & colorhunt.
  • Style like a pro with gorgeous gradients.
  • Convert links already present within your notes into palettes.
  • Easily copy color codes by selecting them.

Usage

Palettes can be created manually by adding a codeblock with the color codes desired.

```palette
#ffffff, #000
```
```palette
rgb(125, 255, 255);
rgb(255, 255, 125);
```

Palettes can also be created from links.
Only URLs from https://coolors.co & https://colorhunt.co are currently supported.

```palette
https://colorhunt.co/ffffff
```

Optional settings can be applied to each palette within the codeblock.

```palette
#fff, #000fff00
{"gradient": true, "aliases": ["white", "black"]}
```

Optional Settings

  • gradient (true/false)
  • direction (row/column)
  • height (number)
  • width (number)
  • aliases (string array)

Caution - using width might cause palettes to display incorrectly.

Commands

Commands can be bound to a hotkey in settings.

  • Create - Creates a new palette using the colors or URL provided
  • Convert link - Converts a selected URL to a palette
  • Convert codeblock link to hex
  • Generate random palette - Creates a new random palette based on color theory combinations

obsidian-color-palette's People

Contributors

alegendstale 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

Watchers

 avatar  avatar  avatar

obsidian-color-palette's Issues

Feature request: More color representations supported by css styles

Can I request support for more color representations supported by css styles, such as RGB and HSL:

#289aff;
rgb(40, 154, 255);
hsl(210, 100%, 58%);

Additionally, if the delimiter also supports ; That's even better, than can directly copy the code block from the CSS source code


A little more greedy :

Maybe customize the render height?


Also, thank you to the author for sharing the plugin.

Originally, I searched like directly previewing the color block color in VSCode.

image

Finally, I found that your color palette plugin, which looks better!

[FT] Improvements to use this plugin for aesthetic reasons.

Hi, first of all great plugin. Thanks for the awesome job.
The other day I came across the the following notion template, and I saw this cute horizontal bar:

image

I think it could be useful as a line separator (like the --- line) or simply for aesthetic reasons.
I have been thinking on how to implement this, I am a complete css beginner. However, I figured out a way to achieve this using your plugin.
I just had to add more columns of colors, reduce the bar height, and add some transparent colors in between the different colors.

However, there are some options that I think would make the experience better.

  1. Option for the bar to do nothing when hovering over the different colors i.e. let the palette be completely unresponsive
    color_p

  2. Having the option to remove the borders at the edges of the bar, so it is an actual rectangle.
    image

  3. Finally, having the option to access css variables of colors. For example I use the AnuPpuccin theme. It has multiple color variables that change depending on the flavor of the theme you choose. For example, the variable --ctp-peach (an rgb variable) (https://github.com/search?q=repo%3AAnubisNekhet%2FAnuPpuccin%20ctp-peach&type=code) would change depending on the flavor of theme. So, if I hard coded it in a pallet, once I change the theme from light to dark, the color would not be updated.

Thanks for reading and hopefully you like some of my ideas. Have a great day.

Convert URLs to HEX codes

Thank you so much for creating this plugin! I was just thinking two days ago, 「It'd be really nice if there was a plugin that could render HEX codes」, and here's a solution! Thank you so much!

One thing I thought of that could make this plugin even better is the ability to convert a code block with an URL to a code block with hex codes instead. That way, a code block dependent on an URL could quickly be made available offline.

One can still manually copy the hex codes into a new code block, but a quick conversion would be really convenient.

Again, thank you for this awesome plugin and keep up the great work‼

plugin disabling tooltips across the app?

When I enable this plugin, all tooltips -- when you hover over file explorer buttons, ribbon icons, and files and folders -- disappear. When I hover over them, nothing happens. Things get back to normal as soon as this plugin is disabled, so I assume this plugin might be the problem.

Feature request: custom name labels

The plugin is pretty cool. Thanks!

It'd be useful to be able to attach a custom text label to each color. Example:

#ff0000: alert
#f3e6c0: window trim

styles.css is missing in release 1.1.0

Downloaded through Brat. Colours didn’t render, saw that styles.css was missing and manually added styles.css to the plugin folder.

Now everything is perfect. Thank you for this plugin! I have been waiting for exactly this functionality for ages :)

Color palette no longer showing all colors.

Obsidian Version: 1.5.3
Installer Version: 1.5.3
Color Palette Version: 2.0.1

I am using the Color Palette plugin pretty extensively and recently found that the palettes are not rendering correctly.
It appears that the latest version of color palette introduced some breaking changes.
In my case, I was using newline delimited color palette.

#E4D00A
#808000
#80461B
#000000
#FFBF00
#5C4033
#FFFF00
#000000

Which will now only render the first color.
After looking at the plugin page i see that you've moved the options from the options screen to be inline with the code block and change the color palette to be comma+space delimited.
One I switched from line delimited to comma+space delimited, the palette renders correctly.

Please deprecate features first and create an announcement page for breaking changes for future updates so that we have a chance to change our notes before the old way is no longer supported.

Thank you.

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.