I have two shades of the color blue (#1E95EF -> #1988DD), and need to figure out the color transformation that has happened in order to replicate it across other colors in my palette (red, green etc).
I've used combinations of darken()/lighten() & saturate()/desaturate() to eyeball the transformation, and have gotten it pretty close:
desaturate(darken(#1E95EF, 4.5%), 8%); === #1A88DC
But I need to get it exactly right, so that the small errors that I make with the percentage decimal points are not replicated across all of the colors. How can I figure out exactly what transformation has occurred?
Here is what I've tried:
sassmeister gist
In this snippet, the relevant classes to my example are .ga-primary and .ga-primary-hover
You can measure the differences between colors in different ways, depending on the color model/space you're using. Hex colors use RGB, but the HSL model will be more useful here. It records a color as 3 values: Hue, Saturation and Lightness.
We can use SASS's HSL functions to work out how each value of the color differs, and then selectively apply that difference to other colors:
$start-color: #1E95EF
$end-color: #1988DD
//We won't need the hue-difference in practice
$hue-difference: hue($start-color) - hue($end-color)
//These express the difference as a percentage
$saturation-difference: saturation($start-color) - saturation($end-color)
$lightness-difference: lightness($start-color) - lightness($end-color)
#function color-adjust($base-color)
//Apply the lightness and saturation changes but keep the original Hue
#return hsl(hue($base-color), saturation($base-color) + $saturation-difference, lightness($base-color) + $lightness-difference)
//To find the adjusted color, just pass whatever base color you like to the color-adjust function:
background: color-adjust(red)
Here's a demo with a few colors: http://codepen.io/anon/pen/bqOaZZ
Obviously that code can be compacted a lot - I'm thinking that what you really want is to define your variants as a set of Saturation/Lightness changes, and then apply them to your whole palette (rather than trying to 'reverse-engineer' it from one example pair). If you want help with something to do that, let me know!
Related
I am generating a hexagon particle pattern for a design project in Processing, HYPE (see sample below).
My problem is that I cannot produce a visible alpha variations, like here, even with the same chunk of alpha code. Googling doesn't help. I'm not sure what exactly I'm doing wrong.
My code is here.
Thank you.
You're using web notation to define your colors, which doesn't support transparency. Instead, use one of the color() functions that take an alpha channel.
colors = new HColorPool()
.add(color(#32184E, 100))
//...
From the reference:
Web color notation only works for opaque colors. To define a color with an alpha value, you can either use color() or hexadecimal notation. For hex notation, prefix the values with 0x, for instance color c = 0xCC006699. In that example, CC (the hex value of 204) is the alpha value, and the remainder is identical to a web color. Note that in hexadecimal notation, the alpha value appears in the first position. (The alpha value appears last when used within color(), fill(), and stroke().) The following is an equivalent way of writing the preceding example, but using color() and specifying the alpha value as its second parameter: color c = color(#006699, 191)
For future reference, you should post your code as an MCVE directly in your question instead of posting a link to it.
The MATLAB code I wrote is:
FigHandle = figure;
set(FigHandle, 'Position', [0, 0, 1060, 140]);
load('velocity0.dat')
v=reshape(velocity0,106,14)
vt=transpose(v)
pim=imagesc(vt) ;
set(gca,'XTickLabel',{'1','2','3','4','5','6','7','8','9','10'}, 'FontSize',11)
set(gca,'YTickLabel',{'0.15','0.35','0.55','0.75','0.95','1.15','1.35'}, 'FontSize',11)
xlabel('distance(km)')
ylabel('depth(km)')
C = colorbar('location','EastOutside');
caxis([2928,5553])
set(get(C,'XLabel'),'String','velocity(m/s)', 'FontSize',11)
I am trying to finish my paper for a scientific journal. The reviewers have asked for new images. However, I have not worked with the code for more than a year and I do not have MATLAB installed at my new job. As such, I asked my friend and got this image below.
Previously, the image looked like this in the past:
Should I change the code to get desired colors? Is this a colorbar issue?
Your friend is using R2014b or later where the default colour map is the parula colour map. The results you have previously are using the default colour map before R2014b, which is the jet colour map. As mentioned in the documentation regarding the default colour map:
colormap default uses the default colormap, which is the parula colormap with 64 colors. Versions of MATLAB® prior to R2014b use jet as the default.
Therefore if you want to display results in this colour map in versions of MATLAB that are R2014b or later, simply calling:
colormap jet;
... at the very end of your code will solve your problem. However, don't be tripped out with the colours. What you're concerned about is whether your data follows the distribution of the colour bar on the right. The colours are primarily just for visual display.
I'm having an issue with attempting to save some plots with transparent ellipsoids on them if I attempt to save them with .ps/.eps extensions.
Here's the plot saved as a .png:
If I choose to save it as a .ps/.eps here is what it looks like:
How I got around this, was to use ImageMagick to convert the original png to a ps. The only problem is that the image in png format is about 90k, and it becomes just under 4M after conversion. This is not good since I have a lot of these images, and it will take too much time to compile my latex document. Does anyone have a solution to this?
The problem is that eps does not support transparencies natively.
There are few options:
rasterize the image and embed in a eps file (like #Molly suggests) or exporting to pdf and converting with some external tool (like gs) (which usually relies as well on rasterization)
'mimic' transparency, giving a colour that looks like the transparent one on a given background.
I discussed this for sure once on the matplotlib mailing list, and I got the suggestion to rasterize, which is not feasible as you get either pixellized or huge figures. And they don't scale very nicely when put into, e.g., a publication.
I personally use the second approach, and although not ideal, I found it good enough. I wrote a small python script that implements the algorithm from this SO post to obtain a solid RGB representation of a colour with a give transparency
EDIT
In the specific case of your plot try to use the zorder keyword to order the parts plotted. Try to use zorder=10 for the blue ellipse, zorder=11 for the green and zorder=12 for the hexbins.
This way the blue should be below everything, then the green ellipse and finally the hexbins. And the plot should be readable also with solid colors. And if you like the shades of blue and green that you have in png, you can try to play with mimic_alpha.py.
EDIT 2
If you are 100% sure that you have to use eps, there are a couple of workarounds that come to my mind (and that are definitely uglier than your plot):
Just draw the ellipse borders on top of the hexbins.
Get centre and amplitude of each hexagon, (possibly discard all zero bins) and make a scatter plot using the same colour map as in hexbin and adjusting the marker size and shape as you like. You might want to redraw the ellipses borders on top of that
Another alternative would be to save them to pdf
savefig('myfigure.pdf')
That works with pdflatex, if that was the reason why you needed to use eps and not svg.
You can rasterize the figure before saving it to preserve transparency in the eps file:
ax.set_rasterized(True)
plt.savefig('rasterized_fig.eps')
I had the same problem. To avoid rasterizing, you can save the image as a pdf and then run (on unixish systems at least) in a terminal:
pdftops -eps my.pdf my.eps
Which gives a .eps file as output.
I solved this by:
1) adding a set_rasterization_zorder(1) when defining the figure area:
fxsize=16
fysize=8
f = figure(num=None, figsize=(fxsize, fysize), dpi=180, facecolor='w',
edgecolor='k')
plt.subplots_adjust(
left = (18/25.4)/fxsize,
bottom = (13/25.4)/fysize,
right = 1 - (8/25.4)/fxsize,
top = 1 - (8/25.4)/fysize)
subplots_adjust(hspace=0,wspace=0.1)
#f.suptitle('An overall title', size=20)
gs0 = gridspec.GridSpec(1, 2)
gs11 = gridspec.GridSpecFromSubplotSpec(1, 1, subplot_spec=gs0[0])
ax110 = plt.Subplot(f, gs11[0,0])
f.add_subplot(ax110)
ax110.set_rasterization_zorder(1)
2) a zorder=0 in each alpha=anynumber in the plot:
ax110.scatter(xs1,ys1 , marker='o', color='gray' , s=1.5,zorder=0,alpha=0.3)#, label=label_bg)
and
3) finally a rasterized=True when saving:
P.savefig(str(PLOTFILENAME)+'.eps', rasterized=True)
Note that this may not work as expected with the transparent keyword to savefig because an RGBA colour with alpha<1 on transparent background will be rendered the same as the RGB colour with alpha=1.
As mentioned above, the best and easiest choice (if you do not want to loose resolution) is to rasterized the figure
f = plt.figure()
f.set_rasterized(True)
ax = f.add_subplot(111)
ax.set_rasterized(True)
f.savefig('figure_name.eps',rasterized=True,dpi=300)
This way, you can manage the size by dpi option as well. In fact, you can also play with the zorder below you want to apply the rasterization:
ax.set_rasterization_zorder(0)
Note: It is important to keep f.set_rasterized(True) when you use plt.subplot and plt.subplot2grid functions. Otherwise, label and tick area will not appear in the .eps file
My solution is to export the plot as .eps, load it up to Inkscape for example, then Ungroup the plot, select the object that I want to set the transparency and just edit the Opacity of the Fill in the "Fill and Stroke" tab.
You can save the file as .svg if you want to tweak it later, or export the image for a publication.
If you are writing the academic paper in latex, I would recommend you export the .pdf file rather than .eps. The .pdf format supports transparency perfectly and has good compression efficiency, and most importantly, can be easily edited in Adobe Illustrator.
If you wanna further edit the graph (NOT EDITING DATA! I MEAN, FOR GOOD-LOOKING), you could open the exported graph, in Adobe Acrobat - Edit - Copy elements into Adobe Illustrator. The two software can handle everything perfectly.
I work happily with this method. Everything clear, editable and small-size. Hope can help.
I'm plotting some data on a jqPlot pie chart, and would like to get at the slice colors.
I'm aware of the possibility to set the slices to colors I set myself. I want to avoid this because the default colors contrast nicely from one to the next slice. Also, the slices highlight on mouse-over, and these highlight-colors are also good looking in the whole. It seems too much work to create a whole new color-scheme and then apply it to the plot when jqPlot already has a good thing built in.
I want to get at the slice colors, because I need to give additional information on certain slices, and will do this outside the plot. Re-using the slice colors would additionally allow me to forego using a legend in the plot itself, and creating my own table with "slice color - name - additional information" which then serves both as legend and source of additional information.
Is there a source of the default colors somewhere? Or is there a way to programmatically extract them?
Ok, managed to find it by delving in the actual code, as the info in the documentation on the website of jqPlot is out of date on this.
For other people wanting to get the default colors:
jquery.jqplot.js, line 354: defaultColors: [ "#4bb2c5", "#EAA228", "#c5b47f", "#579575", "#839557", "#958c12", "#953579", "#4b5de4", "#d8b83f", "#ff5800", "#0085cc", "#c747a3", "#cddf54", "#FBD178", "#26B4E3", "#bd70c7"]
jquery.jqplot.js, line 355: defaultNegativeColors: [ "#498991", "#C08840", "#9F9274", "#546D61", "#646C4A", "#6F6621", "#6E3F5F", "#4F64B0", "#A89050", "#C45923", "#187399", "#945381", "#959E5C", "#C7AF7B", "#478396", "#907294"]
The highlight colors are generated automatically in the function $.jqplot.computeHighlightColors (line 3775 of jquery.jqplot.js). I haven't deduced the actual highlight colors as I don't need them for my purposes, but if anyone else is looking for them, that's where you can start from.
(Line numbers based on version 1.0.8, revision 1250.)
As far as I can tell & also according to the documentation, when the array is exhausted, the colors starts over from the beginning.
According to Gimp colorpicker, jqPlot default series colors used in this example are - clockwise from orange to blue :
#eaa228 - (#efbc67 if highlighted),
#c5b47f - (#d5c9a4 if highlighted),
#579575 - (#88b39d if highlighted),
#839557 - (#a7b388 if highlighted),
#958c12 - (#b3ad58 if highlighted),
#4bb2c5 - (#80c8d5 if highlighted).
Hope it will help you.
EDIT : Please see in this link default series colors specified by jqplot
In Windows 7 and Windows XP you can find the "Window Color and Appearance" dialog under "Control Panel\Appearance and Personalization\Personalization".
Changing "Color1" of item "3D-Border" will result in a change of the following entries in the registry key
[HKEY_CURRENT_USER\Control Panel\Colors]
containing the resulting rgb-values:
Group1 (same values):
InactiveTitle, AppWorkspace, ButtonShadow, Graytext
Group2 (same values, different to those of group1):
Scrollbar, ButtonHilight
Does anyone know how these value are being calculated from the given rgb-values of "Color1"?
After searching the web without results and playing around with many values I did not happen to find a plausible way of how to do this.
Does anyone know the rules for this?
Any help would be appreciated.
I uploaded some demo values, systematically dealing with values in the lower parts. Also a text file comparing the affected registry key [HKEY_CURRENT_USER\Control Panel\Colors] after change of Color to Red (255 0 0).
When you set the "3D Border" color to red, it changed the "Button Face" color to red and interpolated this color to generate various lighter and darker shades of red, which were used to set some related color values.
The point is to create a consistent-looking theme with minimal effort. All you need to do is set the "base" color for 3D objects, and all of the other colors are automatically calculated to ensure that objects have the appropriate 3D appearance.
Some of these values, like the highlight and shadow colors used for 3D objects, are not directly configurable from the control panel applet. However, they can be set manually in the registry, and you can call the SetSysColors function to update currently running applications.
Why do you think you need to know the actual algorithm that Windows is using? What problem are you trying to solve? What are you going to use this information to do?
I do not imagine that the exact algorithm is documented anywhere. The code has been part of the OS since at least Windows 95.