Repository: Qiskit/qiskit

Issue:
Q-sphere phase colors does not match IQX phase colors
<!-- ⚠️ If you do not respect this template, your issue will be closed -->
<!-- ⚠️ Make sure to browse the opened and closed issues -->

### Information

- **Qiskit Terra version**: master
- **Python version**:
- **Operating system**:

### What is the current behavior?

As pointed out by @HwajungKang, it is a bit tricky to figure out that the color wheels are more or less rotated by pi.  It is even harder to decode due to the implicit phase re-normalization in the Qiskit Q-sphere that is not mentioned anywhere:

https://github.com/Qiskit/qiskit-terra/blob/dc3a2a667b8dc22512ca409ecae347d8dbdd944c/qiskit/visualization/state_visualization.py#L761

Qiskit:
<img width="128" alt="Screen Shot 2020-10-01 at 13 21 55" src="https://user-images.githubusercontent.com/1249193/94842179-159ff580-03e9-11eb-912f-02376c352362.png">

IQX:

<img width="193" alt="Screen Shot 2020-10-01 at 13 18 43" src="https://user-images.githubusercontent.com/1249193/94842190-19337c80-03e9-11eb-867d-50d48288c6e7.png">



### Steps to reproduce the problem



### What is the expected behavior?



### Suggested solutions





Discussion:
@nonhermitian Can I have a go at this? I am still pretty new and would to try out some smaller issues before moving on.
@abhobe sure.
@nonhermitian The color scheme for IQX gate color scheme is not enabled by default and the original scheme is kept when looking at #5063. Do want to the same structure as #5063 or just keep IQX as default.
And do you have the official hex colors?
@abhobe are you still working on this? can I try this one? @1ucian0 
@alejomonbar Sure I will try to work on this, but If you find a solution feel free to create a PR. We can work on this together if you would like to.
Sure @abhobe. I was looking at the code. It's supposed to be a new input argument as style or something for the qsphere as style = 'iqx' and display the colormap for "iqx"? @1ucian0 
@alejomonbar I am not sure about that in the exact terms of how the code needs to execute. But that can easily be fixed in the end. The function that needs to be changed would be in the `qiskit.visualization.state_visualization.py` module. The exact function, I will leave to you to figure it out. If you have any other questions, feel free to contact me in slack under the handle @abhobe 
I think simply rotating the colorwheel by pi is good enough. The exact color match is probably not needed. But having phase match colorwise is probably a good thing to have. 

Resolving patch:
diff --git a/qiskit/visualization/state_visualization.py b/qiskit/visualization/state_visualization.py
--- a/qiskit/visualization/state_visualization.py
+++ b/qiskit/visualization/state_visualization.py
@@ -660,7 +660,7 @@ def phase_to_rgb(complex_number):
     complex_number is phase is first mapped to angle in the range
     [0, 2pi] and then to the HSL color wheel
     """
-    angles = (np.angle(complex_number) + (np.pi * 4)) % (np.pi * 2)
+    angles = (np.angle(complex_number) + (np.pi * 5 / 4)) % (np.pi * 2)
     rgb = colorsys.hls_to_rgb(angles / (np.pi * 2), 0.5, 0.5)
     return rgb
 
@@ -910,10 +910,11 @@ def plot_state_qsphere(
 
     n = 64
     theta = np.ones(n)
+    colors = sns.hls_palette(n)
 
     ax2 = fig.add_subplot(gs[2:, 2:])
-    ax2.pie(theta, colors=sns.color_palette("hls", n), radius=0.75)
-    ax2.add_artist(Circle((0, 0), 0.5, color=plt.rcParams["figure.facecolor"], zorder=1))
+    ax2.pie(theta, colors=colors[5 * n // 8 :] + colors[: 5 * n // 8], radius=0.75)
+    ax2.add_artist(Circle((0, 0), 0.5, color="white", zorder=1))
     offset = 0.95  # since radius of sphere is one.
 
     if use_degrees:


Test patch: