Color Play: a playground for colors and palettes in Tiddlywiki

[Mohammad Rahmani]

Hi Chris,

Following your great idea of having a TW palette generator. I did some experiments today. I have uploaded the codes and demos to https://colorplay.tiddlyhost.com/

It uses a predefined color scheme and then generates clickable color shades and tints to be set for a new palette!

You can test the new palettes using the provided toggle button!

It was not packaged as a plugin, so you can simply use the codes and styles in any way you like.

It would be a dream if you can create a tool to generate a TW palette in a simple way! Grouping and automatic setting the colors would be great!

As we discussed creating a palette is a big headache now! But your idea is a step forward!

Screenshot

References:

• https://groups.google.com/g/tiddlywiki/c/lGabtMCLmyk/m/y_SV5jdhAgAJ
• https://groups.google.com/g/tiddlywiki/c/ATBaeD5uDYE/m/S3O7w6LBAgAJ
  

Best wishes

Mohammad

[TiddlyTweeter]

Mohammad wrote:

Hi Chris,

Following your great idea of having a TW palette generator. I did some experiments today. I have uploaded the codes and demos to https://colorplay.tiddlyhost.com/

Ciao M & C ...

M,  small point, the option to load ALL color selectors takes time to load (as there are so many) so the UI probably needs add a note to make that clear??

Best wishes

TT

[Mohammad Rahmani]

Hi TT,

 Many thanks for your comment!

Yes, you are tight! There are 132 css selectors! Each row contains a color strip (includes 19 buttons to select a color) so TW is slow to handle that!

Sure I will add notes and I am looking for a better solution to see how to improve the rendering speed!

Side note

Now creating a TW palette seems easier! but there are still too many selectors and no grouping! I think this is not a good design practice.

Best wishes

Mohammad

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/3ce214ad-5a66-42db-b1e4-aa112777bbb2n%40googlegroups.com.

[TiddlyTweeter]

Mohammad wrote:

Yes, you are tight! There are 132 css selectors! ...

... there are still too many selectors and no grouping! I think this is not a good design practice.

RIGHT. The issue arose, I think, (1) partly from legacy; (2) partly recognition of the power of CSS. 

In reality, TW has SO MANY METHODS of applying CSS it is really daunting  (here are SOME of them , there are MORE available through WikiText) .

The palette selectors reflect the complexity of TW's CSS in general I think! 

FYI, the only developer I know who attempted to look at the whole CSS issue from "Ground Zero" was Telmiger in his BRICKS plugin. 

TW Vanilla, I think, is a really good CSS design, but too complex for EASY logical modification.

My 2 Cents :-)

TT

[Mohammad Rahmani]

On Sat, Mar 13, 2021 at 2:18 PM TiddlyTweeter <Tiddly...@assays.tv> wrote:

Mohammad wrote:

Yes, you are tight! There are 132 css selectors! ...

... there are still too many selectors and no grouping! I think this is not a good design practice.

RIGHT. The issue arose, I think, (1) partly from legacy; (2) partly recognition of the power of CSS. 

In reality, TW has SO MANY METHODS of applying CSS it is really daunting  (here are SOME of them , there are MORE available through WikiText) .

The palette selectors reflect the complexity of TW's CSS in general I think! 

FYI, the only developer I know who attempted to look at the whole CSS issue from "Ground Zero" was Telmiger in his BRICKS plugin. 

I have seen it before! but I will have close look again!

ّ‌

TW Vanilla, I think, is a really good CSS design, but too complex for EASY logical modification.

Let me disagree! I think it is very difficult to maintain Vanilla CSS! It can have a much better design!

My 2 Cents :-)

TT

--

You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/e136335d-d012-4c06-a423-31f109e1ca88n%40googlegroups.com.

[TiddlyTweeter]

TiddlyTweeter <Tiddly...@assays.tv> wrote:

TW Vanilla, I think, is a really good CSS design, but too complex for EASY logical modification.

Mohammad wrote: 

Let me disagree! I think it is very difficult to maintain Vanilla CSS! It can have a much better design!

We are likely BOTH right! In different ways.

I think Vanilla works well out-of-the-box. 

In actual CSS re-design developers, most of them, do a "CSS cascade overlay"  BECAUSE zeroing out Vanilla  is a real challenge that few have attempted.

But we CAN zero-out Vanilla. But we CAN'T zero-out the zillions of classes that will still need defining.

My 2 Cents

TT

[Mohammad Rahmani]

That's true! 

Best wishes

Mohammad

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/3f39f9e8-1b0d-494e-92d3-b494bb4fe3e2n%40googlegroups.com.

[clutterstack]

Looking good, Mohammad. I like that you've incorporated a way to keep a "mood" colour but change the lightness.

Best wishes,

Chris

[Mark S.]

Added to TiddlyWiki toolmap under Colors.

[Mohammad Rahmani]

Thank you Mark.

On Mon, Mar 15, 2021, 7:06 PM 'Mark S.' via TiddlyWiki <tiddl...@googlegroups.com> wrote:

Added to TiddlyWiki toolmap under Colors.

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/fbf680a6-95d5-44f0-98a6-b28345af34f8n%40googlegroups.com.

[Mohammad Rahmani]

Following the work by Thomas and Chris I have updated the Color Play!

This version adds the Coloractions plugin by Thomas! So you can use it as a utility to generate colors and check readability!

I have updated the codes and demos to https://colorplay.tiddlyhost.com/

• The code was not bundled as plugin lets you to hack and change it as you like
• The sidebar tab shows the Color Play Components

The purpose is to let any user create a color palette and a new taste! and perhaps share it with others. 

I would be happy to receive your created palettes and share them with others through the Color Play page!

Don't be afraid: In your free time give a try and create a new color palette and then share it! 

  References:

• https://groups.google.com/g/tiddlywiki/c/lGabtMCLmyk/m/y_SV5jdhAgAJ
• https://groups.google.com/g/tiddlywiki/c/ATBaeD5uDYE/m/S3O7w6LBAgAJ
  
• https://groups.google.com/g/tiddlywiki/c/SswEriOom7M/m/RCO1QcjlAgAJ
  
• https://tid.li/tw5/plugins.html#%24%3A%2Fplugins%2Ftelmiger%2FColorAction
  
• https://tid.li/tw5/apps/bricks.html#%24%3A%2Fapps%2Ftelmiger%2Fbricks%2Fpaletteeditor
  

Best wishes

Mohammad

[springer]

One aspiration for future color tools development: 

Can TW palette designers tap into some online tool to troubleshoot how well color-contrast comes across for those with the most common type of "colorblindness" (deuteranomaly and deuteranopia)? 

The highest priority question: Does a color difference that seems obvious to me come across with contrast for all readers where it most matters -- especially when color is leveraged to distinguish links from surrounding text?

Here's one site that lets you specify four colors and see whether their contrast-relations are well-preserved across common differences in color vision: 

https://davidmathlogic.com/colorblind/#%23D81B60-%231E88E5-%23FFC107-%23004D40

-Springer

[Mohammad Rahmani]

On Thu, Mar 18, 2021 at 12:23 AM springer <springer...@gmail.com> wrote:

One aspiration for future color tools development: 

Can TW palette designers tap into some online tool to troubleshoot how well color-contrast comes across for those with the most common type of "colorblindness" (deuteranomaly and deuteranopia)? 

The coloraction macro by Thomas does the job and I have added it to Color play! I will add some examples to see how readability can be checked!

My goal is to have a tool any user can create a palette of his/her taste! The only solution I found is to develop a theme like vanilla but remove any color settings and then use a palette to add colors. Now working with a color palette especially if you like to do fine tuning is very tough!

 

The highest priority question: Does a color difference that seems obvious to me come across with contrast for all readers where it most matters -- especially when color is leveraged to distinguish links from surrounding text?

The Color play tries to provide a very simple tool to adjust the colors, so ultimately, I expect anybody can use Color Play to customize the palette to his/her taste! This should be done with a minimum number of clicks.

Here's one site that lets you specify four colors and see whether their contrast-relations are well-preserved across common differences in color vision: 

https://davidmathlogic.com/colorblind/#%23D81B60-%231E88E5-%23FFC107-%23004D40

-Springer

On Wednesday, March 17, 2021 at 4:12:31 AM UTC-4 Mohammad wrote:

Following the work by Thomas and Chris I have updated the Color Play!

This version adds the Coloractions plugin by Thomas! So you can use it as a utility to generate colors and check readability!

I have updated the codes and demos to https://colorplay.tiddlyhost.com/

• The code was not bundled as plugin lets you to hack and change it as you like
• The sidebar tab shows the Color Play Components

The purpose is to let any user create a color palette and a new taste! and perhaps share it with others. 

I would be happy to receive your created palettes and share them with others through the Color Play page!

Don't be afraid: In your free time give a try and create a new color palette and then share it! 

  References:

• https://groups.google.com/g/tiddlywiki/c/lGabtMCLmyk/m/y_SV5jdhAgAJ
• https://groups.google.com/g/tiddlywiki/c/ATBaeD5uDYE/m/S3O7w6LBAgAJ
  
• https://groups.google.com/g/tiddlywiki/c/SswEriOom7M/m/RCO1QcjlAgAJ
  
• https://tid.li/tw5/plugins.html#%24%3A%2Fplugins%2Ftelmiger%2FColorAction
  
• https://tid.li/tw5/apps/bricks.html#%24%3A%2Fapps%2Ftelmiger%2Fbricks%2Fpaletteeditor
  

Best wishes

Mohammad

--

You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/659e7463-eba4-4679-bc30-29d96633045bn%40googlegroups.com.

[Mohammad Rahmani]

A new update is out there!

Color Play 0.6 has a more semantic UI and lets users (even newbies) create a color palette of choice! Several experimental palettes have been shipped with Color Play and you can modify them.

Demo: https://colorplay.tiddlyhost.com/

I call this release Nowruz!

Best wishes

Mohammad

[Saq Imtiaz]

Nowruz Mubarak!

[Mohammad Rahmani]

Hi Saq,

 Much appreciated! Nowruz Pirooz!

Best wishes

Mohammad

--

You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/0d396885-5515-4b75-91b8-20d008b5dd73n%40googlegroups.com.

[Thomas Elmiger]

Hi Mohammad,

Thanks for the initiative and the demo. Looks like it will need some additional steps to approach the goal of maximal simplicity and user friendliness even for beginners – but I would say it’s absolutely worth it!

Motivated by the first example I saw from you I experimented a bit with the tools I made some time ago. This is what I could come up with until now and what I still consider as much too complicated: https://tid.li/tw5/apps/palette.html

Important facts, concepts and questions:

• this is experimental – don’t use it for anything important
• based on the primary colour there are calculated a lot of other colours automagically, all tagged and namespaced
  • neighbouring colours
  • triadic and quadratic contrasting colours
  • like shades and tints in your demo these are meant as an inspiration for tuning, only a few of them should be used
    
• some colours are static as they are hard to calculate in a meaningful way: colours for buttons, warnings and a rather neutral scale
• Is it wise to mix colours for the scale (opacity = 1) and use alpha transparency for the shades?
  
• To transfer the result to another wiki it is relatively safe to copy the palette AND all tiddlers tagged $:/tags/Colours (drag the tag pill) at the moment.
  
  • My palette generator (compiles all variables to fixed values) leads to problems with transparency in tag colours. rgba definitions seem not to work in this form, while they work in transclustions (?!) – I wonder if the contrastcolour macro causes this.
    
• Readability can be checked for many TW use cases – but not yet for the tiddler editor buttons for example. (They lack dedicated colours in the CSS.)
• The Colour Scheme Manager is not consistent in the way it is changing colours: backgrounds are changed directly in the palette indexes, while the others change in my new colour tiddlers.

Thanks again and all the best,

Thomas

[Mohammad Rahmani]

On Wed, Mar 24, 2021 at 3:59 AM Thomas Elmiger <thomas....@gmail.com> wrote:

Hi Mohammad,

Hi Thomas,

 

Thanks for the initiative and the demo. Looks like it will need some additional steps to approach the goal of maximal simplicity and user friendliness even for beginners – but I would say it’s absolutely worth it!

Motivated by the first example I saw from you I experimented a bit with the tools I made some time ago. This is what I could come up with until now and what I still consider as much too complicated: https://tid.li/tw5/apps/palette.html

Thank you forsharing! I will go through and will share my findings.

Important facts, concepts and questions:

• this is experimental – don’t use it for anything important
• based on the primary colour there are calculated a lot of other colours automagically, all tagged and namespaced

This is great! Having few main colors and calculate other elements color based on them, yet have possibility for fine tuning!

 

• • neighbouring colours
  • triadic and quadratic contrasting colours
  • like shades and tints in your demo these are meant as an inspiration for tuning, only a few of them should be used
    

Correct!

• some colours are static as they are hard to calculate in a meaningful way: colours for buttons, warnings and a rather neutral scale
• Is it wise to mix colours for the scale (opacity = 1) and use alpha transparency for the shades?

I actually used blend macro to generate tints and shades (mix with black and white). In my new version I use hsla function and use a constant hue and then play eith s, h, and alpha!

But as you said for simplicity having the minimum number of adjustable parameters is better!

• 
  
• To transfer the result to another wiki it is relatively safe to copy the palette AND all tiddlers tagged $:/tags/Colours (drag the tag pill) at the moment.
  
  • My palette generator (compiles all variables to fixed values) leads to problems with transparency in tag colours. rgba definitions seem not to work in this form, while they work in transclustions (?!) – I wonder if the contrastcolour macro causes this.

I will have a look! but my design philosophy is to generate a palette and when finalize, save in tiddler with constant  hex value preferably in #rrggbbaa

 

• • 
    
• Readability can be checked for many TW use cases – but not yet for the tiddler editor buttons for example. (They lack dedicated colours in the CSS.)

This is a pain! I did not inspect the vanilla theme to see where it assigned colors.

@Jeremy I think the theme shall be decoupled from colors! Theme shall only create the layout and palette assign all colors! So, editor buttons shall have their own namesapace and css selectors.

• The Colour Scheme Manager is not consistent in the way it is changing colours: backgrounds are changed directly in the palette indexes, while the others change in my new colour tiddlers.

Thanks again and all the best,

Thomas

Thank you

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/b093e259-677e-4f38-ae8b-4fad765a84f4n%40googlegroups.com.

[Mohammad Rahmani]

Color Play New Update

I have updated the codes and demos to https://colorplay.tiddlyhost.com/

• The code was not bundled as plugin lets you to hack and change it as you like
• The sidebar tab shows the Color Play Components

Rev 0.7 - Mar 250th, 2021

• [NEW] JS macros to convert hsla to rgba and hex codes
• [NEW] JS macros to convert hsl to rgb and hex codes 
  
• [NEW] hsla and hsl color sliders to create new colors (fun tools)
• [NEW] All html extended color names were added. A sidebar tab has been added to select colors easily. Codes are copied to clipboard on click.
• [FIXED] number of colors is limited to 10 in color strip (see Color Palette Studio)
• [FIXED] several bugs have been fixed

Color Play will not only provides tools to create Tiddlywiki color palettes but also tools to play with colors in general!

Best wishes

Mohammad

On Wed, Mar 17, 2021 at 11:42 AM Mohammad Rahmani <mohammad...@gmail.com> wrote:

[Mohammad Rahmani]

Some screenshots of new tools in Color Play 0.7 (Mar 25th, 2021)

Best wishes

Mohammad

On Wed, Mar 17, 2021 at 11:42 AM Mohammad Rahmani <mohammad...@gmail.com> wrote:

[Mohammad Rahmani]

Color Play lets you create a new color using HSLA interface and save the color into a tiddler.

This tiddler has an interactive UI to click and save the color codes into the clipboard!

See: https://colorplay.tiddlyhost.com/#HSLA%20Colors%20with%20Save%20New%20Color%20Button

Best wishes

Mohammad

[TiddlyTweeter]

Mohammad

I truly think that ON-LINE, on the web, tools like this, with simple saving, ARE the way to go.

Go to Color Play. Set your pallette. 

Export it. 

Import it. 

DONE.

There is NO need to install anything IF we do that.

A basic comment

TT

[Mohammad Rahmani]

Thanks TT,

Good description to be added on the first page ;-)

Best wishes

Mohammad

--

You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/b13b1af5-3e9f-4482-ba02-2ca83d44b0f4n%40googlegroups.com.

[Mohammad Rahmani]

Color Play New Update

I have updated the codes and demos to https://colorplay.tiddlyhost.com/

• The code was not bundled as plugin lets you to hack and change it as you like
• The sidebar tab shows the Color Play Components

• The sidebar tab also has a color tools (links to tiddlers)

Rev 0.8 - Mar 26th, 2021

• [NEW] JS macro to convert rgb to hex
• [NEW] JS macro to convert rgba to hex8 (#rrggbbaa)
• [NEW] JS macro to convert hex to hsl
• [NEW] JS macro to convert hex8 (#rrggbbaa) to hsla
• [NEW] Wikitex macro to convert extended color name to hex
• [NEW] Wikitex macro to convert extended color name to hsl
• [NEW] HSLA Color tool shows checker box for transparency
• [NEW] HSLA Color tool now accepts the extended color names as input

Color Play will not only provide tools to create Tiddlywiki color palettes but also tools to play with colors in general!

Best wishes

Mohammad

On Wed, Mar 17, 2021 at 11:42 AM Mohammad Rahmani <mohammad...@gmail.com> wrote:

[Mohammad Rahmani]

RGBA tools have been added to version 0.9

https://colorplay.tiddlyhost.com/#

Rev 0.9 - Mar 27th, 2021

• [NEW] JS macro to convert hex to rgb
• [NEW] RGBA Color tools
• [NEW] RGB Colors
• [NEW] RGBA Colors

Best wishes

Mohammad

[clutterstack]

Looks very interesting. I don't have time to look in detail right now, but this looks like a fun project, maybe also good PR for TiddlyWiki.

Best,

Chris

[Mohammad Rahmani]

Thanks Chris! Your Mood plugin was the initiator of Color play :-)

While the goal is to have a simple and smart color palette generator! I am thinking to include the most common color tools a user may need when work with Tiddlywiki.

Best wishes

Mohammad

--

You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/65dcf600-f666-4f7b-8329-a2a004966f81n%40googlegroups.com.

[Mohammad Rahmani]

I have updated the codes and demos to https://colorplay.tiddlyhost.com/

• The code was not bundled as plugin lets you to hack and change it as you like
• The sidebar tab shows the Color Play Components

Rev 0.9.1 - Mar 30th, 2021

• [FIXED] minor bug in color viewtemplate
• [NEW] color contrast analyzer
• [NEW] JS macro to calculate the contrast ratio
• [NEW] Palette Browser (by Soren Bjornstad)

Best wishes

Mohammad

On Wed, Mar 17, 2021 at 11:42 AM Mohammad Rahmani <mohammad...@gmail.com> wrote:

[strikke...@gmail.com]

Mohammad,

Does this link work? All I get to see is all white page and no wiki.

Birthe

[Mohammad Rahmani]

Hi Birthe,

 I have uploaded the wiki again! It seems something went wrong last time I updated the Color Play!

Please let me know if it works for you.

Best wishes

Mohammad

 

[Mohammad Rahmani]

Birthe,

 You can explorer the new tools from sidebar/contents

Best wishes

Mohammad

--

You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/526a5bf6-b350-4053-b343-f67f74aacdf3n%40googlegroups.com.

[strikke...@gmail.com]

Thank you Mohammad,

Impressive work. Lots to explore. Lovely.

Birthe

[Mohammad Rahmani]

I have updated the codes and demos to https://colorplay.tiddlyhost.com/

Rev 0.9.2 - Apr 2nd, 2021

• [NEW] Selected color mood in Palette Studio shows a circle with a white ring to be recognized
• [NEW] Selected color for a CSS selector in color stripe shows a white cross sign inside the colored box to be recognized

[Mohammad Rahmani]

Play with Contrast Analyzer to see readability based on WCAG Levels for Readability. Most of these in pure wikitext (TW Scripts) few functions are JavaScript.

Best wishes

Mohammad